vue2.0学习笔记(一)--部分内部指令(v-if,v-show)

v-if

根据指令后的值或表达式的布尔值来决定是否在页面上进行渲染工作,是否在DOM中生成元素。如果其值或表达式的布尔值为false,则DOM中没有生成元素。

v-else-if

需要和v-if命令搭配使用。当同时存在多个条件时,根据运算结果来确定是否显示。

v-else

需要配合v-if或者v-else-if使用,作为最后一个条件。

v-show

v-if一样控制元素的渲染。v-if是控制DOM元素的渲染,而v-show是通过控制DOM元素的display属性来控制渲染的。当指令后的值或表达式的布尔值为true时,display的值对应为block等类似的值;当值或表达式的布尔值为false时,display的值对应为none

v-if VS v-show

两者都能控制DOM元素的显示和隐藏,但是在使用v-if的时候,Vue会有一个局部编译或者卸载的过程,因为使用v-if的模板中可能包括数据绑定或者子组件,v-if是真的条件渲染,他能保证在条件切换时能合适的建立或者销毁条件快内的事件监听器和子组件。v-show在任何时间都渲染元素,只是基于css的简单切换
一般来说,v-if有更高的切换开销,v-show有更高的初始渲染开销。如果在运行时需要频繁切换现因状态的话用v-show比较好,运行时不会改变状态的话用v-if比较好。

猜你喜欢

转载自blog.csdn.net/nianqusuifeng/article/details/88105481
今日推荐