Vue.js条件渲染v-if、v-show、v-else-创新互联
v-if
网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了齐齐哈尔免费建站欢迎大家使用!v-if 完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除;否则,对应元素的一个克隆将被重新插入DOM中。
Title Hello
greeting取值为true,效果截图:
greeting取值为false,效果截图:
template v-if
因为v-if是一个指令,需要将它添加到一个元素上。但是如果想切换多个元素,则可以把元素当作包装元素,并在其上使用v-if,最终的渲染结果不会包含它。
Title Title
Paragraph2
Paragraph3
在切换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,效果截图:
greeting取值为true,效果截图:
注意:v-show不支持语法
现在做一个小的demo,要求是如果文本框里面的内容为空是提示用户输入内容,有内容输入时,刚才的提示内容消失并出现一个提交的按钮
{{$data|json}}
new Vue({ el:'#app', data:{ msg:'' } })
在上面的例子中,声明一个空的字符串msg,当不存在msg的时候,提示内容的div里面v-show为true;存在msg的时候,button里面v-show为true
通常,我们用jquery实现的时候都是去判断输入框内容是否为空,这里一样可以用条件判断 v-if的方式去实现,但是与v-show有区别
{{$data|json}}
随着内容输入,class为error的div整个消失了,而使用v-show的时候,只是把display属性设置为none
一般来说,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
这可能也是一个组件
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享文章:Vue.js条件渲染v-if、v-show、v-else-创新互联
文章转载:http://hbruida.cn/article/didded.html