vue2的動態(tài)class綁定

最近得空,想重新?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,會報錯:


報錯圖1

意思是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>
報錯圖2

上面的代碼在vue1里是可以的,但是在vue2里已經(jīng)變成了:

<div id="pageSidebar" :class="name">
   xxxx
</div>

以后在使用過程中如果有其他不同煤裙,本文會第一時間更新...
另外,有不妥之處蟹地,還望各前端大神指教积暖,畢竟我是業(yè)余的Starter


福利:
小伙伴們藤为,給大家發(fā)紅包嘍怪与!人人可領,領完就能用缅疟。祝大家領取的紅包金額大大大分别!#吱口令#長按復制此消息,打開支付寶就能領却嬉耘斩!arPyVF21FW

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市桅咆,隨后出現(xiàn)的幾起案子括授,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荚虚,死亡現(xiàn)場離奇詭異薛夜,居然都是意外死亡,警方通過查閱死者的電腦和手機版述,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門梯澜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人渴析,你說我怎么就攤上這事晚伙。” “怎么了俭茧?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵咆疗,是天一觀的道長。 經(jīng)常有香客問我母债,道長民傻,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任场斑,我火速辦了婚禮漓踢,結果婚禮上,老公的妹妹穿的比我還像新娘漏隐。我一直安慰自己喧半,他們只是感情好,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布青责。 她就那樣靜靜地躺著挺据,像睡著了一般。 火紅的嫁衣襯著肌膚如雪脖隶。 梳的紋絲不亂的頭發(fā)上扁耐,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機與錄音产阱,去河邊找鬼婉称。 笑死,一個胖子當著我的面吹牛构蹬,可吹牛的內(nèi)容都是我干的王暗。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼庄敛,長吁一口氣:“原來是場噩夢啊……” “哼俗壹!你這毒婦竟也來了?” 一聲冷哼從身側響起藻烤,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤绷雏,失蹤者是張志新(化名)和其女友劉穎头滔,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體涎显,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡拙毫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了棺禾。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缀蹄。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖膘婶,靈堂內(nèi)的尸體忽然破棺而出缺前,到底是詐尸還是另有隱情,我是刑警寧澤悬襟,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布衅码,位于F島的核電站,受9級特大地震影響脊岳,放射性物質(zhì)發(fā)生泄漏逝段。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一割捅、第九天 我趴在偏房一處隱蔽的房頂上張望奶躯。 院中可真熱鬧,春花似錦亿驾、人聲如沸嘹黔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽儡蔓。三九已至,卻和暖如春疼邀,著一層夾襖步出監(jiān)牢的瞬間喂江,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工旁振, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留获询,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓规求,卻偏偏與公主長得像筐付,于是被迫代替她去往敵國和親卵惦。 傳聞我的和親對象是個殘疾皇子阻肿,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容