vue学习七（v-for数组和对象、v-if、监测索引值、监测对象属性增删、副本、组
件v-for）
⽂章⽬录
⽤ v-for 将数组对应为⼀组元素
在 v-for 块中，我们拥有对⽗作⽤域属性的完全访问权限。v-for 还⽀持⼀个可选的第⼆个参数为当前项的索引
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ ssage }}
</li>
</ul>
<script type="text/javascript">
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
</script>
渲染为：
Parent - 0 - Foo
Parent - 1 - Bar
上述也可以利⽤如下的写法，可以⽤ of 替代 in 作为分隔符
<ul id="example-3">
<li v-for="(item, index) of items">
{{ parentMessage }} - {{ index }} - {{ ssage }}
</li>
</ul>
⼀个对象的 v-for
你也可以⽤ v-for 通过⼀个对象的属性来迭代。
<ul id="v-for-object" class="demo">
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</li>
</ul>
<script type="text/javascript">
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
</script>
浏览器渲染结果如下：
0. firstName: John
1. lastName: Doe
2. age: 30
key复⽤
为了给 Vue ⼀个提⽰，以便它能跟踪每个节点的⾝份，从⽽重⽤和重新排序现有元素，你需要为每项提供⼀个唯⼀ key 属性。理想的 key 值是每项都有的唯⼀ id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的⼯作⽅式类似于⼀个属性，所以你需要⽤ v-bind 来绑定动态值 (在这⾥使⽤简写)：
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
建议尽可能在使⽤ v-for 时提供 key，除⾮遍历输出的 DOM 内容⾮常简单，或者是刻意依赖默认⾏为以获取性能上的提升。
因为它是 Vue 识别节点的⼀个通⽤机制，key 并不与 v-for 特别关联，key 还具有其他⽤途
数组利⽤索引设置项值
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利⽤索引直接设置⼀个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
举个例⼦
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
以下两种⽅式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
<div id="div1">
<p v-for="item in items">{{item}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#div1",
data: {
items: ['a', 'b', 'c']
}
})
// 解决vm.items[1] = 'x' // 不是响应性的
Vue.set(vm.items, 1, "d")
vm.items.splice(0, 1, "dd");
vm.$set(vm.items, 2, "cc");
// 解决vm.items.length = 2 // 不是响应性的
vm.items.splice(5)
</script>
浏览器渲染输出
filter过滤对象数组dd
d
cc
对象属性的添加或删除
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
/
/ `vm.b` 不是响应式的
我们来看下⾯的例⼦
<ul id="div2">
<li v-for="(value, key) in userProfile">
{{ key }}: {{ value }}
</li>
</ul>
<script type="text/javascript">
var vm = new Vue({
el: "#div2",
data: {
userProfile: {
name: 'Anika'
}
}
})
Vue.set(vm.userProfile, 'age', 27);
vm.$set(vm.userProfile, 'sex', "男");
// 有时你可能需要为已有对象赋予多个新属性，⽐如使⽤ Object.assign() 或 _.extend()        vm.userProfile = Object.assign({}, vm.userProfile, {
ager: 27,
favoriteColor: 'Vue Green'
})
</script>
渲染输出如下：
name: Anika
age: 27
sex: 男
ager: 27
favoriteColor: Vue Green
显⽰过滤/排序结果
我们想要显⽰⼀个数组的过滤或排序副本，⽽不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性
<ol id= "div3">
<li  v-for="n in evenNumbers">{{ n }}</li>
</ol>
<script type="text/javascript">
new Vue({
el:"#div3",
data: {
numbers: [ 1, 2,3,4,5]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
console.log(number)
return number % 2 === 0
})
}
}
})
</script>
在计算属性不适⽤的情况下 (例如，在嵌套 v-for 循环中) 你可以使⽤⼀个 method ⽅法：
或者如下的例⼦也可以
<ol id= "div4">
<li v-for="n in even(numbers)">{{ n }}</li>
</ol>
<script type="text/javascript">
new Vue({
el:"#div4",
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
})
</script>
v-for on a template
类似于 v-if，你也可以利⽤带有 v-for 的 渲染多个元素。⽐如：
<ul id="ul">
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
<script type="text/javascript">
new Vue({
el:"#ul",
data:{
items:[{msg:"a"},{msg:"b"}]
}
})
</script>
渲染输出如下：
a
b
v-for with v-if
<div id="forAndIf">
<ul>
<li v-for="todo in todos" v-if="todo!=='isb'">
<!-- v-if='todo!=='isb' ⽤来判断 todos中的属性值是否为字符串isb，若不是则显⽰。
此外v-if的属性值若设置为以下的数据对应显⽰的结果：
0，false，null ，undefined 显⽰为空⽩
1，2，‘’，true  显⽰为全部属性值
说到底，v-if是⼀个判断语句，若为真则显⽰，为假不显⽰。-->
{{todo}}
</li>
</ul>
</div>
<script>
var forif = new Vue({
el: '#forAndIf',
data: {
todos: {
ist: 'ff',
isb: 'isb',
iss: 'iss'
}
}
})
</script>
渲染输出如下：
ff
iss
组件v-for
任何数据都不会被⾃动传递到组件⾥，因为组件有⾃⼰独⽴的作⽤域。为了把迭代数据传递到组件⾥，我们要⽤ props

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。