vue基础语法之分支循环结构
程序员文章站
2022-06-26 08:00:49
...
分支循环结构
分支结构
v-ifv-elesv-eles-ifv-show false 隐藏 true显示
v-if和v-show的区别
`v-if`控制元素是否渲染到页面
v-show控制元素是否显示(已经渲染了页面)v-if适用于操作不是很多的情况 隐藏就是把这个元素删除掉(removeChild)
v-show 频繁操作 隐藏就是display:none
循环结构
循环结构遍历数组
v-for遍历数组(数组里面的值可以是对象 需要值就点出来)
<li v-for='item in list'>{{item}}</li>
<li v-for='(item,index) in list'>{{item}}+'----'{{index}}</li>
item每项的数据index每项的索引
key的作用：
帮助Vue区分不同的元素，从而提高性能
<li :key='item.id' v-for='(item,index) in list'>{{item}}+'----'{{index}}</li>
key的值是唯一的 这样方便vue区分DOM元素 对我们开发者基本没什么影响
循环结构遍历对象
v-for遍历对象
<li v-for='(value,key,index) in list'>{{item}}+'----'{{index}}</li>
value:数据的值
key:键 数据的名字
index:索引
顺序是固定的
v-for和v-if结合使用
<li v-if='value==12' v-for='(value,key,index) in list'>{{item}}+'----'{{index}}</li>'
如果if内的条件是对象中的值 name只有符合这一个条件的数据才能显示出来
代码示例
<body>
<div id="app">
<ul>
<li v-for='item in dataArr'>{{item}}</li>
<li v-for='(item,index) in dataArr'>{{item}}----{{index}}</li>
<li :key='item.id' v-if='item.age>15' v-for='item in dataObjArr'>{{item.name}}----{{item.age}}</li>
</ul>
<ol>
<li v-for='(value,key,index) in dataObj'>{{value}}---{{key}}---{{index}}</lis>
</ol>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
dataArr: [
'q', 'w', 'e', 'r'
],
dataObjArr: [
{
id: 1,
name: 'zhangsan',
age: 15
},
{
id: 2,
name: 'lisi',
age: 16
},
{
id: 3,
name: 'wanwu',
age: 20
}
],
dataObj: {
name: '112233',
age: '6666'
}
}
})
</script>
</body>
输出结果
q
w
e
r
q----0
w----1
e----2
r----3
lisi----16
wanwu----20
112233—name—0
6666—age—1
上一篇： Java基础篇——分支结构和循环结构