我的 Vue.js 学习日记 （五） - 条件渲染

上节回顾

v-bind:class与v-bind:style的用法现在脑子里已经有一个概念了，想不起来的时候也可以回过来再看一下，现在的主要目的是知道有这个东西，知道他是干嘛的就够了。

v-if

v-if用来 销毁/重建 元素，销毁后的元素变成：<!---->

v-if绑定到 <template> 后，template 元素中的子元素将与它同生共死

具体用法：

html:

<h2 v-if="ok">用于单个元素</h2>

<template v-if="ok">

  <h2>用于template</h2>

  <p>我只是为了表示说我和h2是一个模块的</p>

</template>

js:

data:{
  ok: 1
}

v-if v-else v-else-if

这里记录一下写法：

<h3 v-if="ok===1">ok : 1</h3>
<h3 v-else-if="ok===2">ok : 2</h3>
<h3 v-else-if="ok===3">ok : 3</h3>
<h3 v-else>ok 不等于 1、2、3任意一个</h3>

ok同v-if段落，运行后在F12-Console处修改ok值查看效果

元素复用与key

元素复用

尝试运行下面代码，切换到ok:2之后输入值，之后切换到ok:3：

<h3 v-if="ok===1">ok : 1</h3>
<template v-else-if="ok===2">
  <input type="text" placeholder="这里是ok:2">
</template>
<template v-else-if="ok===3">
  <input type="text" placeholder="这里是ok:3">
</template>
<h3 v-else>ok 不等于 1、2、3任意一个</h3>

通过观察可以发现，切换到ok:3后，之前输入的值还在，但删除输入的值后，placeholder提示它确实是ok:3。

tip:注意切换顺序，必须是2 -> 3

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。

那么复用性在带来高效的同时，也有一定的弊端，就像2 -> 3我并不需要带过来原有值怎么办？

key

不想要复用的元素需要去为他们指定key

修改后的上段落代码：

<h3 v-if="ok===1">ok : 1</h3>
<template v-else-if="ok===2">
  <input type="text" placeholder="这里是ok:2" key="ipt-2">
</template>
<template v-else-if="ok===3">
  <input type="text" placeholder="这里是ok:3" key="ipt-3">
</template>
<h3 v-else>ok 不等于 1、2、3任意一个</h3>

可以再次运行查看效果。

tip:没有key的元素依然会复用

v-if 与 v-show

用法：

html:

<h3 v-show="ok===0">我是v-show</h3>

js:

data:{
  ok: 1
}

输出：

<h3 style="display: none;">我是v-show</h3>

在控制台修改app.ok=0后：

输出：

<h3 style="">我是v-show</h3>

v-show与v-if的区别还是蛮明显的，v-show总是会渲染出元素，只是在修改他的style

另外，v-show不能作用在template，也不可以与v-else-if与v-else配合使用

小节

在使用v-if时需要注意元素的复用性，使用v-show时要知道它一直存在