Vue.js之v-for

v-for標簽可以用來遍歷數組，將數組的每一個值綁定到相應的視圖元素中去，此外，v-for還可以遍歷對象的屬性，並且可以和template模板元素一起使用。

一、迭代數組

_html:

<ul>
        <li v-for="li in list" :title="li.title">{{li.name}}</li>
 </ul>

_js:

el:'...'
data:{
list:[{name:"China",title:'中國'},{name:"Japan",title:'中國的一部分'},{name:"Korea",title:"韓國"}]
}

這里的list一個對象構成的數組，通過v-for將數組每一項映射到<li>標簽中去。li是一個變量，代表list中的每一項，最終結果如下：

China
Japan
Korea

 v-for 命令還可以接受index作為可選的第二參數，當有兩個參數時，參數之間用逗號分隔，並包含在一組括號里面。像這樣

<ul>
        <li v-for="(li，i) in list" :title="li.title">{{li.name}}--{{i}}</li>
 </ul>

China--0
Japan--1
Korea--2

 

二，迭代對象屬性

v-for命令還可以迭代一個對象的屬性。默認是迭代屬性的值。不像迭代數組，它可以接受兩個可選的參數，迭代屬性的key和index。

_html:

    <ul>
        <li v-for="(li,key,index) in obj">{{key}}--{{li}}--{{index}}</li>
    </ul>

_js:

obj:{
            name:'gg',age:'23',job:'none',dream:'code'
        }

_效果：

name--gg--0
age--23--1
job--none--2
dream--code--3

三、 v-for和range（整數列）

比如我要100個妹子,可以這樣寫：

<li v-for='i in 100'>妹子{{i}}</li>

這樣就得到100個妹子，而且號碼是從1開始的。

四、把張老師網站上的妹子挪過來

他網站里的妹子圖片都在一個文件夾里而且名字很有規律，很適合用v-for命令。

_html:

    <template v-for="mm in mms">
        <span>{{mm.name}}</span>
        <image :src="mm.location"></image><br/>
    </template>

這里的template元素用來將幾個重復出現的元素打包起來。

_js:

el:'v-for',
data:{mms:[{name:'mm1',location:'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg'},
            {name:'mm2',location:'http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg'},
            {name:'mm3',location:'http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg'},
            {name:'mm4',location:'http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg'}
        ]
}

上面這樣寫沒問題，不過做了大量重復的工作，可以用computed計算屬性來簡化他：

computed:{
        mms:function(){
            var arr=[];
            for(var i= 1;i<7;i++){
                var temObj={};
                    temObj.name='mm'+i;
                    temObj.location='http://image.zhangxinxu.com/image/study/s/s128/mm'+i+'.jpg';
                arr.push(temObj);
            }
            return arr;
        }
    }

mms計算屬性所對應的函數返回一個像上面一樣的數組。有點在於可以通過i參數來方便的調整mm的數量。這就是計算屬性computed和靜態屬性data相比的強大之處。

效果:

mm1 mm2 mm3 mm4 mm5 mm6

五. 值得注意的點

如果你的list是由原始類型的元素構成，比如下面這樣:

data:{

    list:[1,2,3]    

}

渲染出這樣的視圖:

現在你想讓第一個元素變成5，

通過this.list[0] = 5這樣的方法是無效的。無法觸發視圖的更新。因為它繞過了vue數據綁定的基礎Object.defineProperty,因此，需要使用Vue.set方法，來通知VUE進行視圖變更

像下面這樣:

 

//this.list[0] = 5 無效

Vue.set(this.list, 0, 5)//三個參數分別是要改變的數組，要改變元素的索引和要改變的值