微信代理运营,成都关键词seo推广电话,做视频网站服务器,wordpress动态导航侧边栏文章目录 前文提要条件渲染v-showv-ifv-else-if和v-else特殊写法#xff0c;很多个一致的v-if如何消除 总结 前文提要
本人仅做个人学习记录#xff0c;如有错误#xff0c;请多包涵
主要学习链接#xff1a;尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 条件渲染
条… 文章目录 前文提要条件渲染v-showv-ifv-else-if和v-else特殊写法很多个一致的v-if如何消除 总结 前文提要
本人仅做个人学习记录如有错误请多包涵
主要学习链接尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 条件渲染
条件渲染顾名思义是符合条件了才给你渲染出来才显示出来。 可以使用两种指令完成这个操作v-show和v-if指令。
其中v-show指令隐藏不显示的元素结构仍然在也就是你浏览器页面中虽然看不见但是你打开控制台查看源代码的时候仍然能够看见它这是通过修改底层的display属性实现的。
但是v-if则不一样它是直接删除整个结构的你网页中看不见源代码中同样不出现所以比较耗费资源如果变化比较频繁的时候也不建议使用v-if。
只要保证v-show和v-if后面的表达式布尔值为真就会显示假就不显示。
v-show
如果将代码写成这样
bodydiv idboxh1 v-showafalse显示a/h1button clicka!a改变a的数值,a现在{{a}}/button/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,data: {a:false},})/script
/body那么你就已经可以通过v-show掌握元素的显示和隐藏了通过将元素隐藏或是显示的控制权移交给Vue框架。
当然你也可以通过写一些函数来返回布尔值v-show后面的只要是布尔值就行true显示false隐藏。
呈现效果 显示 隐藏 v-show实现的时候元素隐藏该元素的结构仍然存在。
v-if
如果将上文代码中的这一部分修改其余部分不变
h1 v-ifafalse显示a/h1呈现效果就会大不相同 显示 隐藏 当v-if后面的布尔值为假的时候整个结构都会被删除会用一个注释来代替。
v-else-if和v-else
将上文代码改为这样
bodydiv idboxh1 v-ifa1显示1/h1h1 v-else-ifa2显示2/h1h1 v-else-ifa3显示3/h1h1 v-else显示hh/h1button clickaa1,a现在{{a}}/button/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,data: {a:1},})/script
/body当v-if后面的条件为真的时候就不会接着判断后续v-else-if和v-else的条件了。你如果都写成一堆的v-if那么它会接着判断。 当a4的时候永远都只会显示’显示hh’这和其他编程语言中的逻辑是一样的。 需要注意的是v-if和v-else-if只要v-if和v-else-ifv-if和v-else-if还有v-else这些组合如果出现了那么标签的中间就不能出现其他不包含其他的标签要始终保持他们是一个紧密的整体
错误示范写成这样就不可以
h1 v-ifa1显示1/h1h1 v-else-ifa2显示2/h1h1 v-else-ifa3显示3/h1h1333/h1h1 v-else显示hh/h1特殊写法很多个一致的v-if如何消除 h1 v-ifa1显示1/h1h1 v-ifa1显示2/h1h1 v-ifa1显示3/h1例如写成这样子连续三行的判断条件都是同一个可以使用div标签包裹就像这样但是很不推荐这种写法因为会破坏DOM结构 div idboxdiv v-ifa1h1显示1/h1h1显示2/h1h1显示3/h1/div但是有一种特殊的类似写法不会破坏DOM结构那就是使用template就像这样 template v-ifa1h1显示1/h1h1显示2/h1h1显示3/h1/templatetemplate在解析完成后会自动消失不像div标签一样会存在与html文件中破坏DOM结构使得原先可以定位的代码失效。
总结 至此结束。
如果你觉得这篇文章写的不错多多点赞~收藏吧
