vue基础语法之分支循环结构
分支循环结构
分支结构
v-if
v-eles
v-eles-if
v-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