v-for指令渲染列表,item是元素别名
<ul>
<li v-for="item in array">{{item.city}}</li>
</ul>
const dataObj = {
array:[
{
city:‘beijing‘
},{
city: ‘fuzhou‘
},{
city: ‘shanghai‘
}
]
};
可以添加index编号,从0开始
<ul>
<li v-for="(item,index) in array">{{index}}.{{item.city}}</li>
</ul>
v-for可以支持对象的遍历,支持(value,name,key)
<ul>
<li v-for="(value,name,key) in object">{{key}}.{{name}}.{{value}}</li>
</ul>
const dataObj = {
object : {
name:‘gui‘,
key:‘123‘,
value:‘321‘
}
};
支持进行区块渲染
<ul>
<template v-for="item in array">
<li>{{item.city}}</li>
<li>.....</li>
</template>
</ul>
可以使用数值循环渲染
<div v-for="i in 10">{{i}}</div>
为了避免渲染本应该被隐藏的列表,把v-if放在v-for的外层
<template v-if="flag">
<li v-for="item in array">{{item.city}}</li>
</template>
将属性改为计算属性,过滤后再渲染
<ul>
<li v-for="item in arrayCity">{{item.city}}</li>
</ul>
const app = new Vue({
el: ‘#app‘,
data: dataObj,
computed: {
arrayCity(){
this.array.splice(1,1);
return this.array;
}
},
methods: {}
});
<ul>
<template v-for="item in array">
<li>{{item.city}}</li>
<li>.....</li>
</template>
</ul>
<div v-for="i in 10">{{i}}</div>
<template v-if="flag">
<li v-for="item in array">{{item.city}}</li>
</template>
<ul>
<li v-for="item in arrayCity">{{item.city}}</li>
</ul>
const app = new Vue({
el: ‘#app‘,
data: dataObj,
computed: {
arrayCity(){
this.array.splice(1,1);
return this.array;
}
},
methods: {}
});