Vue.js中的条件渲染指令分析

1适用于单个元素

Vue.js中的条件渲染指令可以根据表达式的值来决定是渲染还是破坏DOM中的元素或组件。

html:

Div id='app' p v-if='type===1 '混合面条/p p v-else-if='type===2 '扁平肉/p p p v-else=' type===3 ' others/p/div js:

脚本var app=new Vue({ el: '#app '，data : { type : 2 } })；/script输出结果：

扁平肉

当表达式值为真时，将呈现当前元素或组件以及所有子节点。

2适用于多个元素

上面例子中的代码只能判断当前元素。如果需要一次判断多个元素，可以使用模板元素，在元素中使用条件指令，最终的渲染结果不会包含模板元素。

html:

Div id=' app2 '模板v-if=' type==' menu ' ' p混合面条/p p扁平肉/p p其他/p/模板/divjs:

Varapp2=newvue ({el:' # app2 '，data : { type : ' menu ' })；呈现的代码：

Div ID=' app2固定面条/p p扁平肉/p p其他/p/div3性能考虑

此外，出于性能原因，Vue.js将尽可能重用现有元素。

html:

Div id=' app3 '模板v-if=' type==' mobile ' '标签手机号码：/label输入占位符='请输入手机号码'/模板模板v-else标签邮箱：/Label输入占位符='请输入您的邮箱'/templatebutton @ click='切换账号'切换账号/按钮/divjs:

var app3=new Vue({ el: '#app3 '，data: { type: 'mobile' }，methods : { toggleaccount : function(){ this . type=(this . type===' mobile '？mail ' : ' mobile ')；} }});效果(演示):

从示例效果中，我们可以发现输入框的内容没有变化，这说明Vue.js在这里重用了输入元素。

我们还可以通过指定输入元素的唯一键来避免重用。

html:

Div id=' app3 '模板v-if=' type==' mobile ' '标签移动电话号码：/label输入占位符='请输入移动电话号码'键=' mobile '/模板v-else标签邮箱：/Label输入占位符='请输入邮箱'键=' email '/template button @ click=' toggle account '切换帐户/按钮/div效果：

我们为每个输入指定键属性，因此它们是独立的，并且每次单击都是不同的。这里的标签是可重用的，因为我们没有为它设置键属性。

摘要

以上是边肖介绍的Vue.js中的条件渲染指令。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！