热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:Vue.js学习笔记:指令vif

篇首语:本文由编程笔记#小编为大家整理,主要介绍了Vue.js学习笔记:指令v-if相关的知识,希望对你有一定的参考价值。

篇首语:本文由编程笔记#小编为大家整理,主要介绍了Vue.js学习笔记: 指令 v-if相关的知识,希望对你有一定的参考价值。


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

html>


    
    



    Hello







greeting取值为true,效果截图:

技术分享

greeting取值为false,效果截图:

技术分享

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





技术分享



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


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


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


一般来说,v-if有更高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁地切换,则使用v-show较好;如果在运行时条件不大可能改变,则使用v-if较好。


v-else   顾名思义,v-else就是Javascript中else的意思,它必须跟着v-if或v-show,充当else功能


    我是对的


    我是错的




技术分享


将v-show用在组件上时,因为指令的优先级v-else会出现问题,所以不要这样做


我们可以用另一个v-show替换v-else

这可能也是一个组件



本文出自 “dapengtalk” 博客,请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1873289


推荐阅读
author-avatar
一个不起眼的小人物
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有