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

条件渲染初探

vue的条件渲染还是要看指令系统，下面逐一介绍：

(1)v-if

div id=' app ' div v-if=' C1 ' C1/div/div.var app=new Vue({ el: '#app '，data : { c 1: false } })；当c1为true时，呈现由v-if绑定的元素，否则不呈现该元素。渲染结果如下：

div id='app'/div(2)v-else

div id=' app ' div v-if=' C1 ' C1/div div v-else C1不为真/div/div.var app=new Vue({ el: '#app '，data : { c 1: false } })；当c1为true时，呈现由v-if绑定的元素，否则呈现由v-else绑定的元素。这里值得注意的是，在Handlebars模板引擎中else可以与每个匹配，当遍历数为0时，呈现else块对应的内容；至于vue，官方的说法是每个被v-else绑定的语句都必须绑定在v-if或v-else-if语句后面。一开始我抱着一线希望试了试，结果还是这样。

当遍历次数为0时，由v-else绑定的元素不会被呈现，控制台也会报告一个错误。

个人认为vue的模板引擎在这方面可能有所欠缺。虽然我们可以通过在循环中添加条件判断来实现同样的功能，但是我们需要添加额外的代码。

v-else-if

div id=' app ' div v-if=' C1 ' C1/div div v-else-if=' C2 ' C2/div/div.var app=new Vue({ el: '#app '，data: { c1: false，c 2: true } })；这里先检查c1是否为真，如果为是，渲染v-if绑定的元素，否则检查c2是否为真，如果为是，渲染v-else-if绑定的元素。如果c1/c2都不为真，则两者都不呈现。渲染结果如下：

Div id='app' divc2/div/div不难理解，v-if、v-else和v-else-if在类似C语言中的功能与if、else和else if类似。

二、条件渲染优化

除了在类似C语言中提供类似if、else和else if的功能外，vue还为开发人员提供性能优化解决方案。

(1)电视节目

V-show具有与v-if相似但不同的功能。v-if依赖于控件DOM节点，而v-show依赖于控件DOM节点的显示属性。

div id=' app ' div v-show=' C4 ' C4/div/div.var app=new Vue({ el: '#app '，data : { c 4: false } })；当v-show binding的值为true时，节点正常呈现；如果为false，则仍呈现该节点，但style=' display:none'通过CSS隐藏节点。渲染结果如下：

div id=' app ' div style=' display : none；'与v-if相比，c4/div/div实际上是在开始渲染节点，后续的状态切换是基于CSS的。对于状态需要频繁切换的节点，v-show比直接修改DOM节点的v-if性能更好。

然而，v-show的缺点显而易见。不管初始条件是什么，它都会渲染DOM节点，这对于第一次屏幕加载优化来说不一定是好事。

钥匙

当使用诸如v-if这样的指令时，vue将尽可能地重用渲染过的元素，而不是重新渲染它们。例如，如果绑定到v-if和v-else的一对元素具有相同的内部DOM元素，则当绑定的数据发生变化时，可能只更新绑定的属性，而保留用户操作或JS修改的其他属性。

div id=' app ' form div class=' input-group ' v-if=' name ' label for=' name ' name :/label input type=' text ' name=' name ' placeholder=' user name '/div class=' input-group ' v-else label for=' email ' email :/label input type=' text ' name=' email ' placeholder=' email '/div button v-: click . protect=' toggle ' toggle/button/form/div.var app=new Vue({ el: '#app '，data: { name: true }，methods : { toggle : function(){ this . name=！this.name} }});这是这里的情况。当点击切换按钮时，v-if的边界值将被切换，相应地，DOM节点也将被切换。然而，事实上，因为vue重用了输入元素，所以用户填写的内容不会同时被清空。类似地，在切换项目中，标签元素只修改for属性和元素中的文本，但不会破坏原始的DOM节点或生成新的DOM节点。

但是vue做的优化并不总是被人们所需要。当不需要时，我们可以给这个元素添加一个唯一的键值。

div id=' app ' form div class=' input-group ' v-if=' name ' label for=' name ' name :/label input type=' text ' name=' name ' placeholder=' user name ' key=' name '/div class=' input-group ' v-else label for=' email ' email :/label input type=' text ' name=' email ' placeholder=' email ' key=' email '/div button v-: click . prevent=' toggle '/toggle.var app=new Vue({ el: '#app '，data: { name: true }，methods : { toggle : function(){ this . name=！this.name} }});这样，在向这两个不需要“优化”的输入元素添加唯一键后，vue就不会重用这两个元素了。每次切换后，修改的内容将不会保留。

第三，多思考

(1)基于标签的指令(v-bind、v-if)

车把的助手有自己独立的语法，比如：

{{#if ok}} h1Yes/h1{{/if}}它定义了一组自己的语法。为了实现相同的功能，vue使用像v-bind和v-if这样的指令，它们都绑定到标签，例如

H1 v-if='ok'Yes/h1更简单明了。

Handlebars语法支持同时绑定多个DOM节点。

{ # if ok } } h1yes/h1 h1yes/h1 yes/h1 { {/if } }按照之前的思路，vue是这样实现的吗？

h1v-if=' ok ' yes/h1h v-if=' ok ' yes/h1h v-if=' ok ' yes/h1那是不可能的。添加额外的DOM节点来包装它们？那更不可能。Vue扩展了一个模板节点。使用时，我们可以像使用HTML节点一样使用它，但是在呈现页面时，它不会呈现在页面上。因此，前面的代码可以实现如下：

模板v-if=' ok ' h1yes/h1h yes/h1h yes/h1/模板，它和Handlebars差不多，甚至更复杂，毕竟模板这个词好长~

(2)带条件渲染字符串

如前所述，像v-if这样的指令都是基于标签的。如果我不想创建额外的标签，只想根据条件修改一个字符串呢？是的，你猜对了，模板节点，它不仅可以存储节点，还可以直接存储字符串，就像这样：

div id='app '模板v-if='c3 '文本/模板/div.var app=new Vue({ el: '#app '，data : { c : true } })；渲染结果：

Div id='app'text/div，实际上模板节点不会呈现在页面上。

(3)属性的条件渲染

既然HTML节点可以有条件呈现，多个HTML节点可以有条件呈现，HTML节点中的字符串可以有条件呈现，那么HTML属性呢？编写模板时，HTML属性实际上是字符串。我们可以使用上面的模板创建字符串作为HTML属性吗？

复制的代码如下： div title='模板v-if=' C3' title content/template '这里应该有title/div

看着会不会觉得奇怪？Vue也有同感，因此控制台解析为：

复制的代码如下： div title='模板v-if=' C3' title content/template '这里应该有title/div

中间的模板v-if=' C3' titlecontent/template已经被识别为字符串，那么如果去掉外面的双引号呢？

复制的代码如下： div title=模板v-if=' C3' title内容/模板。这里应该有标题/div

看起来更奇怪了。最终渲染结果：

div title=' template ' title content应该有title/divvue的模板解析不是简单的依赖于字符串解析，所以这里不能用这个方法。正确的姿势是使用v-bind命令：

div v-bind:title='c3 '？Title content' : '' 'title/div因为v-bind指令的期望值实际上可以接受js表达式，这里我们传入一个条件表达式。当c3为真时，它呈现为title='title content '，当c3为假时，它呈现为title=' '