标签：组元 临时 修改 排序 VID font new 输入 color
v-for="item in items " // 数组更新检测 // 对象更改检测注意事项 // 显示过滤 / 排序结果 // 一段取值范围的 v-for //
<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‘ } ] } }) ==> · Foo · Bar
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引
<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> var example2 = new Vue({ el: ‘#example-2‘, data: { parentMessage: ‘Parent‘, items: [ { message: ‘Foo‘ }, { message: ‘Bar‘ } ] } }) 你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法： <div v-for="item of items"></div>
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
var app = new Vue({
el:"#app",
data:{
object:{
tit:"标题",
con:"内容",
time:"中午"
}
}
})
==>
·标题
·内容
可以提供第二个的参数为键名
<ul>
<li v-for="(value,key) in object">
{{ key }} : {{ value }}
</li>
</ul>
==>
·tit : 标题
·con : 内容
·time : 中午
第三个参数为索引
<ul>
<li v-for="(value,key) in object">
{{ index }}. : {{ key }} : {{ value }}
</li>
</ul>
==>
·0. tit : 标题
·1. con : 内容
·2. time : 中午
在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的
<div v-for="item in items" :key="item.id"> <!-- 内容 --> </div>
* push() * pop() * shift() * unshift() * splice() * sort() * reverse()
example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
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)
你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名
vm.$set(vm.items, indexOfItem, newValue)
为了解决第二类问题，你可以使用 splice：
vm.items.splice(newLength)
var vm = new Vue({ data: { a: 1 } }) // `vm.a` 现在是响应式的 vm.b = 2 // `vm.b` 不是响应式的
var vm = new Vue({ data: { userProfile: { name: ‘Anika‘ } } })
你可以添加一个新的 age 属性到嵌套的 userProfile 对象：
Vue.set(vm.userProfile, ‘age‘, 27)
你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
vm.$set(vm.userProfile, ‘age‘, 27)
有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：
Object.assign(vm.userProfile, { age: 27, favoriteColor: ‘Vue Green‘ })
你应该这样做：
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 }) } }
在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：
<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 }) } }
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
==>
1 2 3 4 5 6 7 8 9 10
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
<ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li> </ul> <p v-else>No todos left!</p>
------- end -------
标签：组元 临时 修改 排序 VID font new 输入 color
原文地址：https://www.cnblogs.com/blueDr/p/9229775.html
