vue学习---条件渲染

in Vue教程 with 0 comments, 3577 views

条件渲染

v-if

在字符串模板中,比如Handlebars,我们可能需要这样来写一个条件语句:

<!-- Handlebars template -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

在vue中我们可以使用v-if指令来达到相同的效果:

<h1 v-if="ok">Yes</h1>

同样的也适用于v-else:

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

也许你不想直接将指令应用在具体的html标签上,vue其实也帮你想到了,我们可以用template元素来包裹一层 就像下面这样,而且template元素并不会最终被渲染出来。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else

v-else指令可以给v-if标明else区块(😇明显是搭配使用的):

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

应用v-else的元素必须紧跟在与之对应的v-if或者v-else-if元素之后(DOM保持同一层级),否则会得不到预期的效果。

v-else-if (2.0版本新增的一个指令)

顾名思义,和v-if搭配使用,提供一个else-if区块,而且和js语句中一样,可以串联着使用:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-else指令类似,v-else-if也必须紧接着一个应用了v-if或者v-else-if的元素使用。

利用key来控制可重用的元素

vue总是尽可能高效的渲染DOM元素,so经常重用它们而不是又重头开始渲染。除了帮助vue变得很快,这个原则也使得vue有了一些有用的特性.比如下面例子中的允许用户在多个登录类型中来回切换:

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

在上述语句中,当改变loaginType时,vue默认不会移除input而重新渲染,也就是重用input,实际上两个语句区块中的input是共用的,尽管它们的placeholder并不相同,仔细想想这样也是合理的,切换的loginType时只需要改变placeholder值就好了。这样也服务vue的高效率原则。

但有时你并不想有这种元素复用,vue中允许我们这么做,我就是想重新渲染,因为你切换的时候input中已经输入的值是保留的,有时这看起来确实可能不是你想要的结果。这时我们可以给这个元素添加key属性(赋个唯一的值)从而避免默认的元素复用。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

😄不知道表述清楚没,附上两个在线Demo,未加Key标识 加了Key标识

注意:上述例子中label元素同样是复用的,因为并没有用key单独标识。

v-show

v-show指令是条件渲染显示某一元素的另外个可选项,使用方式大致相同:

<h1 v-show="ok">Hello!</h1>

🙄毕竟不会无聊定义两个一样的东东,它和v-if的区别在于v-show总是会被渲染并且驻留在DOM节点中,也就是它其实一直存在,只是简单的利用css的display属性切换元素的显示和隐藏而已。

注意:v-show不支持template语法,也不能和v-else配合作业。

v-if vs v-show

v-if是“真正”的条件渲染,因为它能确保在条件语句区块内的事件监听子组件在切换时完全的移除和重新创建

v-if同时也是“惰性”的:如果v-if的判断条件在初始状态时为false,那么vue不会执行任何操作,直到判断条件为true时才会首次进行渲染。

相对而言,v-show则简单得多,应用了该指令的DOM元素总是会进行渲染,不管判断条件原始状态是true还是false(😴这不是我的错啊,有些时候还是需要我的),仅仅是简单的进行css级别的切换。

一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。

Responses ${replyToWho} / Cancel Reply