1、v-for
<div id="app">
<div v-for="item in items">
{{item.name}}
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
items:[
{name:'jack'},
{name:'dool'},
{name:'look'}
]
}
});
</script>
2、v-for的序号
类似jstl里也有一个索引,v-for的索引命名是v-for="(item,index) in items"
3、循环对象
<div id="app">
<div v-for="value in obj">
{{value}}
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
obj:{name:'jack',sex:'男',age:'16'}
}
});
</script>
同样也可以(value,key,index) in obj分别表示值键和序号
4、v-for里的key
<div v-for="item in items" :key="item.id"> |
当使用for时,如果不是简单元素,最好标注唯一key,
5、变动方法
这些方法可以引起视图的刷新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
调用方法为vm.items.push({name:'',sex:''})
6、非响应
由于js的原因,有些数组的变动是不能响应的。
第一种是利用序号改变值,vm.items[1]='x',这种视图不会响应,需要Vue.set(vm.items,indexOfItem,newValue)这种方法或者vm.items.splice(indexOfItem,1,newValue)
如果要修改数组长度,vm.items.length也是不行的,需要vm.items.splice(newLength)
7、增删的非响应
我们知道,在js里自定义对象,如obj={};需要新增属性只需要obj.age=22;即可,但是这个在vue里不能使用。
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
// 通过如下方法新增属性
Vue.set(vm.userProfile, 'age', 27)
如果要赋予多个属性,用如下方法
Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
8、过滤结果
如果需要过滤结果,可以使用computed,或者methods
<li v-for="n in evenNumbers">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
// filter是对数组每一个元素进行过滤,这里面简单例子其实v-if也可以做
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
// 如果使用methods
<li v-for="n in even(numbers)">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
9、v-for对数字的处理
// 会显示1-10 10个span
<div>
<span v-for="n in 10">{{ n }} </span>
</div>