最近得空,想重新?lián)炱饁ue.js衩辟,就談談vue2的更變泊柬。(注:報錯代碼為我實際頁面代碼,跟示例有所不同杂曲。但是原理是一樣的)
1:首先先來個v-for的不同:
<li id="xxxx" class="nav-item" v-for="lv1 in nav">
<a href="javascript:;" class="nav-link" :class="{'nav-toggle': lv1.child}">
<i :class="lv1.icon"></i>
<span class="title" v-html="lv1.name"></span>
<span class="selected"></span>
<span class="arrow" v-if="lv1.child"></span>
</a>
<ul class="sub-menu" v-if="lv1.child">
<li class="nav-item" v-for="lv2 in lv1.child" :class="{active: (lv2.name == activeName)}">
<a href="javascript:;" @click="loadpage(lv2)" class="nav-link" :class="{'nav-toggle': lv2.child}">
<i :class="lv2.icon"></i>
<span class="title" v-html="lv2.name"></span>
<span class="selected"></span>
<span class="arrow" v-if="lv2.child"></span>
</a>
<ul class="sub-menu" v-if="lv2.child">
<li class="nav-item" v-for="lv3 in lv2.child">
<a href="javascript:;" @click="loadpage(lv3, $index)" class="nav-link">
<i :class="lv3.icon"></i>
<span class="title" v-html="lv3.name"></span>
</a>
</li>
</ul>
</li>
</ul>
</li>
看上面的<li id="xxxx" .... 這里vue1是不會報錯的庶艾,但是如果你使用的是vue2,會報錯:
意思是v-for不能用在根標簽上,必須在<li>標簽外面再套一層,如:
<div id="xxxx">
<li v-for="xxx">
</li>
</div>
這樣才不會報錯仅财。
2:再來一個v-bind:class(:class以下的v-bind:class用:class代替)的不同
例:
<div id="pageSidebar" :class={{name}}>
xxxx
</div>
<script>
new Vue({
el: '#pageSidebar',
data: {
name: "container"
},
methods: {
loadpage: function() {
//略
}
}
});
</script>
上面的代碼在vue1里是可以的,但是在vue2里已經(jīng)變成了:
<div id="pageSidebar" :class="name">
xxxx
</div>
以后在使用過程中如果有其他不同煤裙,本文會第一時間更新...
另外,有不妥之處蟹地,還望各前端大神指教积暖,畢竟我是業(yè)余的Starter
福利:
小伙伴們藤为,給大家發(fā)紅包嘍怪与!人人可領,領完就能用缅疟。祝大家領取的紅包金額大大大分别!#吱口令#長按復制此消息,打開支付寶就能領却嬉耘斩!arPyVF21FW