频道导航

vue.js实现条件渲染的实例代码

2019-01-07 Vue 前端之家

前端之家收集整理的这篇文章主要介绍了vue.js实现条件渲染的实例代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

一、初探条件渲染

vue 的条件渲染，仍旧依赖于指令系统，下面逐个介绍：

（1）v-if

...... var app = new Vue({ el: '#app',data: { c1: false } });

当 c1 为真值的时候，渲染出 v-if 所绑定的元素，否则不渲染出该元素。渲染结果如下：

（2）v-else

c1 is not true

...... var app = new Vue({ el: '#app',data: { c1: false } });

当 c1 为真值的时候，渲染 v-if 所绑定的元素，否则渲染 v-else 所绑定的元素。这里值得注意的是，在 Handlebars 模板引擎里面，else 可以和 each 所搭配，当遍历次数为0的时候，则渲染 else 块所对应的内容；而对于 vue，官方给出的说法是，每个 v-else 所绑定语句必须绑定在 v-if 或者 v-else-if 语句的后面。一开始我还抱有一丝希望地去试了一下，结果。。。

遍历次数为0的时候，v-else 绑定的元素没有渲染出来，而且控制台还报错了。

个人感觉，在这一方面，vue 的模板引擎可能有所欠缺。虽然说，我们可以利用在循环中添加条件判断实现相同的功能，但却需要添加额外的代码。

（3）v-else-if

...... var app = new Vue({ el: '#app',data: { c1: false,c2: true } });

这里先检查 c1 是否为真值，是则渲染出 v-if 绑定的元素，否则检查 c2 是否为真值，是则渲染出 v-else-if 所绑定的元素。如果 c1 / c2 都不为真值，则都不渲染。渲染结果如下：

不难理解，v-if、 v-else、 v-else-if 跟类 C 语言中的 if、else、else if 功能相仿。

二、条件渲染优化

除了提供跟类 C 语言中的 if、else、else if 相似的功能以外，vue 还为开发者提供了性能优化方案。

（1）v-show

v-show 有着和 v-if 相似而又不同的功能，v-if 依赖于控制 DOM 节点，而 v-show 是依赖于控制 DOM 节点的 display 属性。

...... var app = new Vue({ el: '#app',data: { c4: false } });

当 v-show 绑定的值为真值的时候，节点正常渲染；当为假值的时候，节点仍旧渲染，但是添加了 style="display:none;"，将节点通过 CSS 的方式隐藏。渲染结果如下：

相比于 v-if，v-show 其实不管在什么条件下，一开始都会进行节点的渲染，而后续的状态切换都是基于 CSS 实现的。针对状态需要频繁切换状态的节点，v-show 相对于直接修改 DOM 节点的 v-if 有更好的性能。

然而，v-show 的缺点也是显而易见的，不管初始条件如何，它都将进行 DOM 节点的渲染，这对首屏加载优化不一定是个好事情。

（2）key

在使用 v-if 等指令的时候，vue 会尽可能地复用已经渲染的元素，而不是全部地重头渲染。例如一对绑定 v-if 与 v-else 的元素，如果二者内部 DOM 元素相同，则可能在所绑定数据改变时，只更新绑定了的属性，其它通过用户操作或者 JS 修改了的属性将被保留。

<div class="input-group" v-else>
  <label for="email"&gt;email:</label>
  <input type="text" name="email" placeholder="email" />
</div>

<button v-on:click.prevent="toggle"&gt;toggle</button>

...... var app = new Vue({ el: '#app',data: { name: true },methods: { toggle: function () { this.name = ! this.name; } } });

这里就是如此，点击 toggle 按钮的时候，v-if 所绑定的值会切换，相应的，DOM 节点也会跟着切换，但是实际上，由于 vue 重用了 input 元素，切换的同时，用户填写的内容并没有被清空。同理，label 元素在切换的工程中，其实也只是修改了 for 属性和元素内的文字，并没有销毁原有 DOM 节点和生成新的 DOM节点。

但是 vue 做的这种优化并不总是为人们所需要的，不需要它的时候，我们为这个元素添加一个唯一的 key 值就可以了。

<div class="input-group" v-else>
  <label for="email"&gt;email:</label>
  <input type="text" name="email" placeholder="email" key="email" />
</div>

<button v-on:click.prevent="toggle"&gt;toggle</button>

...... var app = new Vue({ el: '#app',methods: { toggle: function () { this.name = ! this.name; } } });

像这样，为这两个不需要“优化”的 input 元素添加了唯一标识的 key 以后，vue 便不会再复用这两个元素。每次切换之后，修改的内容将不会被保留。