189 8069 5689

Vue.js条件渲染v-if、v-show、v-else-创新互联

v-if

网站建设哪家好，找成都创新互联公司！专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了齐齐哈尔免费建站欢迎大家使用！

v-if 完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。




    
    Title



    Hello

greeting取值为true，效果截图：

Vue.js 条件渲染 v-if、v-show、v-else

greeting取值为false，效果截图：

Vue.js 条件渲染 v-if、v-show、v-else

template v-if

因为v-if是一个指令，需要将它添加到一个元素上。但是如果想切换多个元素，则可以把

Vue.js 条件渲染 v-if、v-show、v-else

在切换v-if模块时，Vue.js有一个局部编译/卸载过程，因为v-if中的模板可能包括数据绑定或子组件。v-if是真实的条件渲染，因为它会确保条件块在切换时合适地销毁与重建条件块内的事件监听器和子组件。

v-if是惰性的--如果初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show简单得多----元素始终被编译并保留，只是简单地基于CSS切换。

v-show

v-show 根据表达式的值来显示或隐藏HTML元素。当v-show赋值为false时，元素将被隐藏。查看DOM时，会发现元素上多了一个内联样式。


    Hello

greeting取值为false，效果截图：

Vue.js 条件渲染 v-if、v-show、v-else

greeting取值为true，效果截图：

Vue.js 条件渲染 v-if、v-show、v-else

注意：v-show不支持