- v-for 可以遍历数组和者对象
1。v-for = "(item index ) in items"
当items为数组的时候item代表数组中的每一项 index代表数组中的索引
2。v-for = "(value key index ) in items"
当items为对象的时候 value 为值 key 为键名 index 为索引
3。key键值 当使用v-for更新已渲染过的dom元素的时候，默认“就地复用”
为了保持唯一性，需要为每个循环的元素绑定一个唯一的key
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
数组变异方法(会改变原始的数据,能触发视图更新的方法)
- push() 往数组后面追加元素
- pop() 删除数组的最后一个元素
- shift() 在数组前面添加一个元素
- unshift() 伤处数组的最前面一个元素
非数组变异方法(生成一个新的数组，不会改变原来的数组)
- filter()
- concat()
- 当改变数组的长度的时候 或者给数组的单个赋值不会触发驶入更新 如下
1。vm.items[indexOfItem] = newValue
2。vm.items.length = newLength
数组改变其他方法
// Vue.set 参数(改变的数据，改变数据的索引，新的值)
Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue) //Vue.$set 是全局vm.set的一个别名
// Array.prototype.splice 参数(改变值的位置，改变几个，新的值)
vm.items.splice(indexOfItem, 1, newValue)
对象的更改检测
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
- 对于已经创建的实例，Vue不能动态添加根级别的响应式属性，但可以使用
vue.set(object,key,value)对对象添加响应式的属性如下
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
Vue.set(vm.userProfile, 'age', 27)
- 为对象添加多个属性可使用Object.assign()
1。object.assign()不可合并不可枚举的对象
//参数以为目标对象 后面的参数式需要添加到目标对象的参数
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
显示过滤/排序结果
- 计算属性
<li v-for="n in evenNumbers">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
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
})
}
}
- 取一段范围值,下面的循环会执行10次
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
//result 1 2 3 4 5 6 7 8 9
- v-for with(和某某在一起)v-if
//渲染的v-if 会存在与每一项中
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
//当需要有条件的跳过循环可以在循环元素的外层添加v-if 或者在外层添加template
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
组件当中的v-for
- 在组件里面使用v-for和在普通元素中使用式一样的 但是key值是必须的
注意：在组件中使用v-for 任何的值都不会传递到组件中去 我们需要 v-bind:值 用props接受值
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index"
v-bind:key="item.id"
>
</my-component>
- 简单的todolist切换如下
<div id="todo-list-example">
<form v-on:submit.prevent="addNewTodo">
<label for="new-todo">Add a todo</label>
<input
v-model="newTodoText"
id="new-todo"
placeholder="E.g. Feed the cat"
>
<button>Add</button>
</form>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</div>
Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">Remove</button>\
</li>\
',
props: ['title']
})
new Vue({
el: '#todo-list-example',
data: {
newTodoText: '',
todos: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})
在一些特殊的标签中只有特定的子标签才会以解析如ul 中的里li 如果需要在li中渲染模板 需要li标签中添加 is属性 is="todo-item" todo-iteme 为组件的名字同<todo-item>效果是一样的
网友评论