我們知道v-for是用于遍歷的，那么里面的內(nèi)容就可以看成是數(shù)組元素，既然是數(shù)組元素，那么它就應(yīng)該有對應(yīng)的下標(biāo)，如：v-for="(item,index) in movies"

這里的item可以理解為變量i，而{{item}}拿的就是對應(yīng)的內(nèi)容了

這里的{{index}}就是我們對應(yīng)的下標(biāo)

結(jié)合我們之前總結(jié)的一些動態(tài)綁定，在這里我們可以做一個點(diǎn)擊事件，根據(jù)我們點(diǎn)擊的位置，來為元素添加對應(yīng)的class屬性渲染，下面上代碼

<li v-for="(item,index) in movies" @click="handle(index)":class="currentIndex==index?'active':''">{{index}}:{{item}}

</li>

data:{

currentIndex:-1

}

methods:{

handle:function(x){

this.currentIndex=x;

}

那么我來講解一下，首先@click點(diǎn)擊事件，把通過遍歷獲取的index作為實(shí)參傳遞給handle這個函數(shù)，也就是說我們把index實(shí)參傳遞給了x這個形參，再把x的值賦給了currentIndex，這樣就實(shí)現(xiàn)了把view里面的內(nèi)容傳給model，緊接著，我用動態(tài)綁定的class決定是否展示active類里的屬性，如果說currentIndex==indexd的話我們就執(zhí)行active，注意這里的類一定要加' '否則無效。這樣就實(shí)現(xiàn)了model到view的過程，而這兩個過程的中間商就是view-model，這也就是我們所說的mvvm