手机版

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

时间:2021-08-28 来源:互联网 编辑:宝哥软件园 浏览:

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中的条件渲染指令。希望对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!

版权声明:Vue.js中的条件渲染指令分析是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。