vue2的动态class绑定

最近得空，想重新捡起vue.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里已经变成了：

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

以后在使用过程中如果有其他不同，本文会第一时间更新...
另外，有不妥之处，还望各前端大神指教，毕竟我是业余的Starter

---

福利：
小伙伴们，给大家发红包喽！人人可领，领完就能用。祝大家领取的红包金额大大大！#吱口令#长按复制此消息，打开支付宝就能领取！arPyVF21FW