Vue中判断语句与循环语句基础用法及v-if和v-for的注意事项详解_vue.js_

一、判断语句

v-if、v-else、v-else-if

v-if是判断是否将DOM元素显示出来

不满足条件的元素，会直接删除，不会存在浏览器上面

v-show

也是用来判断，是否将DOM元素在页面上显示，但是与v-if有着区别，它的不显示是通过display:none;实现的，还是存在浏览上。

未成年
壮年
老年
show
if

如下图片显示，不存在时v-if和v-show的显示状态

可以发现show是被display:none;影藏起来了

if已经从这个世界上消失了

案例

这里用简单的if判断，可以通过按钮控制不同的输入模式

这里也会出现一个细节上的问题，因为Vue会出现大量的复用情况，所以这里需要在input表单中设置一个key值，使其出现差别，在以输入内容的表单，切换后内容会也会被取消掉。

用户名用户名邮箱选择

二、循环语句

如下案例

遍历数组

是通过循环来实现点击变色，这里遍历出了下标和内容，在页面上显示出来

v-for="(item,index) in list"

item值index索引

{{index}}--{{item}}

遍历对象

{{key+"-"+item}}
{{key+"-"+item+"-"+index}}

三、v-if和v-for的注意事项

如果将v-if和v-for 在同一个标签内使用，会出现每次先循环，在去判断渲染，在性能上出现了浪费

要注意这个细节，在写代码时，可以将for包含到if判断中，使其不在一个标签内，从而避免了同是使用的情况。

这里，还会出现一个问题，如果使用index为索引，在渲染表单的时候就会出现，表单添加，表单内容没有出现变化，需要自己起一个唯一标志符。

附：根据某一个与待循环列表无关的属性决定是否展示渲染后的数组对象时，可以把 v-if 上移。

例子：根据 isShow 属性决定是否显示 users 列表

users: [ {'name': '111'}, {'name': '222'}, {'name': '333'}, {'name': '444'} ], 

isShow: true

改良前：

 {{ user.name }} 

改良后：

 {{ user.name }} 

总结

到此这篇关于Vue中判断语句与循环语句基础用法及v-if和v-for的注意事项详解的文章就介绍到这了,更多相关Vue判断语句与循环语句用法内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！