Vue 列表渲染

列表渲染

用v-for把一个数组对应为一组元素

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

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

 data:{

 items:[
    {text:"chifan",isOk:true},
    {text:"shuijue",isOk:false},
    {text:"kandianshi",isOk:true},
    {text:"dayouxi",isOk:true},
    {text:"kandianying",isOk:false},
 ]                   
 }    

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

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

你也可以用 of 替代 in 作为分隔符

<div v-for="item of items"></div>  

v-for把对象属性渲染列表

<div id="app">
    <div v-for="value in xx"> {{value}}</div>               
</div>
    <script>
         var vm=new Vue({
             el:"#app",
             data:{
                xx:{
                    firstName: 'John',
                    lastName: 'Doe',
                    age: 30 
                }           
             }
         });

    </script>  

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

<div id="app">
    <div v-for="(value,key) in xx">{{key}} is {{value}}</div>               
</div>
<script>
     var vm=new Vue({
         el:"#app",
         data:{
            xx:{
                firstName: 'John',
                lastName: 'Doe',
                age: 30 
            }           
         }
     });

</script>  

第三个参数为索引：

<div id="app">
    <div v-for="(value,key,index) in xx">{{index}}{{key}} is {{value}}</div>               
</div>
<script>
     var vm=new Vue({
         el:"#app",
         data:{
            xx:{
                firstName: 'John',
                lastName: 'Doe',
                age: 30 
            }           
         }
     });

</script>  

v-for渲染组件列表

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

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

<div id="app">
    <todo-item v-for="(item,index) in items" v-bind:tiaomu="item.text" :key="index"></todo-item>         
</div>
<script>
    Vue.component("todo-item",{
        template:`<div>{{this.tiaomu}}<input type="button" value="x"/></div>`,
        props:['tiaomu']
    })
    var vm=new Vue({
        el:"#app",
        data:{
            items:[
               {text:"chifan",isOk:true},
               {text:"shuijue",isOk:false},
               {text:"kandianshi",isOk:true},
               {text:"dayouxi",isOk:true},
               {text:"kandianying",isOk:false},
            ]                   
        }
    });

</script>  

一段取值范围的v-for

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

<span v-for="n in 10">{{ n }} </span>  

v-for on a <template>

<ul>
<template v-for="item in items">
    <li>{{item.msg}}</li>
    <li class="divider"></li>
</template>
</ul>  

显示过滤/排序结果

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

<div v-for="num in evenNum">{{num}}</div>  
<script>
var vm=new Vue({
    data:{
         numbers:[1,2,3,4,5]                 
    },
    computed:{
        evenNum:function(){
            return this.numbers.filter(function(item){
                return item%2==0;
            });
    }
    },
});

</script>  

在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：

<div v-for="num in even()">{{num}}</div>  
<script>
var vm=new Vue({
    data:{
         numbers:[1,2,3,4,5]                 
    },
    methods:{
        even:function(){
            return this.numbers.filter(function(item){
                return item%2==0;
            });
        
    }
    }
});

</script>  

数组更新检测

变异方法

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

重塑数组

变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating method)方法，例如： filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

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

注意事项

1.当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue

2.当你修改数组的长度时，例如： vm.items.length = newLength

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

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)  

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

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

example1.items.splice(newLength)