vue里面的v-for列表循环

古城微笑少年丶 2021-10-19 09:58 341阅读 0赞

# 列表渲染 #

## v-for ##

v-for可以把数据中的一个数组对应为一组元素  
v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

<li v-for="item in items">{
       {item.text}}</li>

data:{
        items:[
            {text:"第一组"}，
            {text:"第二组"}，
            {text:"第三组"}，
        ]
    }

输出HTML

第一组
    第二组
    第三组

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。

<li v-for="(item, index) in items">
        {
       { index }} - {
       { item.text }}
    </li>

输出HTML

1 - 第一组
    2 - 第二组
    3 - 第三组

你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

## 一个对象的 v-for ##

你也可以用 v-for 通过一个对象的属性来迭代。

data:{
        items:{
            text1:"第一组",
            text2:"第二组",
            text3:"第三组",
        }
    }

输出HTML

第一组
    第二组
    第三组

你也可以提供第二个的参数为键名：

输出HTML

text1 : 第一组
    text2 : 第二组
    text3 : 第三组

第三个参数为索引：

<li v-for="(item,key,index) of items">
        {
       {index}} . {
       {key}} : {
       {item}}
    </li>

输出HTML

0 . text1 : 第一组
    1 . text2 : 第二组
    2 . text3 : 第三组

## key ##

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值（在这里使用简写）：

建议尽可能使用 v-for 来提供 key ，除非 DOM 内容遍历起来非常简单，或者你是有意识的要依赖于默认行为以便获得性能提升。  
因为它是 Vue 识别节点的一个通用机制， key 并不特别与 v-for 关联，key 还具有其他用途，我们将在后面的指南中看到其他用途。

## 一个组件的v-for ##

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

在自定义组件里，你可以像任何普通元素一样用 v-for 。

<mycom v-for="(item,index) in todo" :key="index"></mycom>

Vue.component('mycom', {
      template: "<h1>疯狂的石头</h1>"
    })
    var vm = new Vue({
        el:"#box",
        data:{
            todo:[
                {text:1,ok:true},
                {text:2,ok:false},
                {text:3,ok:true},   
            ]  
        }   
    })

疯狂的石头
    疯狂的石头
    疯狂的石头

但是我们又如何将数据渲染到我们的组件中呢？现在我们就需要绑定一个属性，属性需要在组件中注册

<mycom v-for="(item,index) in todo" :key="index" :lie="item.text"></mycom>

Vue.component('mycom', {
      template: "<h1>疯狂的石头{
       {this.lie}}</h1>",
      props:["lie"]
    })
    var vm = new Vue({
        el:"#box",
        data:{
            todo:[
                {text:1,ok:true},
                {text:2,ok:false},
                {text:3,ok:true},   
            ]  
        }   
    })

输出HTML

疯狂的石头1
    疯狂的石头2
    疯狂的石头3

## v-for 与 < template > ##

我们也可以使用 v-for 来渲染 < template >标签。例如:

data:{
        todo:[
            {text:1,ok:true},
            {text:2,ok:false},
            {text:3,ok:true},   
        ]  
    }

输出HTML

1
    2
    3

## 数组更新检测 ##

### 变异方法 ###

变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：  
push()  
pop()  
shift()  
unshift()  
splice()  
sort()  
reverse()

### 非变异方法 ###

相非变异(non-mutating method)方法，例如： filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
        return item.message.match(/Foo/)
    })

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。 Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

### 注意事项 ###

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

*  当你利用索引直接设置一个项时，例如： vm.items\[indexOfItem\] = newValue
 *  当你修改数组的长度时，例如： vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 vm.items\[indexOfItem\] = newValue 相同的效果， 同时也将触发状态更新：

Vue.set(example1.items, indexOfItem, newValue)
    // Array.prototype.splice
    example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice：

example1.items.splice(newLength)

## 对象更新检测 ##

我们可以用以下三种方法对对象进行更新：

如果你需要为对象属性之中添加新的属性，那么我么你可以利用以下两种方法

Vue.set("目标对象","属性","值")
    vm.$set("目标对象","属性","值")

如果我们想更新对象中的属性，以下这种方法可以满足你

this.userProfile = Object.assign({}, this.userProfile, {
        age: 27,
        favoriteColor: 'Vue Green'
    })

this.userProfile   //对象本身的属性
    
    Object.assign()    //es6新增加的方法，用来将源对象的所有可枚举属性，复制到目标对象。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象
    
    {}                 //你需要增加的属性
    
    如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

*  注意！我们不更改根属性的属性，只能更改跟属性以下的子属性的属性

## 显示过滤 / 排序结果 ##

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

<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
            })
        }
    }

## 一段取值范围的 v-for ##

v-for 也可以取整数。在这种情况下，它将重复多次模板。

输出HTML

1 2 3 4 5 6 7 8 9 10