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)