LOFTER-网易轻博

在之前我们都有理解vue的双向绑定，但是在现实项目中，需要运用得灵活得多。可能需要对class，title等属性进行灵活的定义（根据提供的数据接口，动态的定义属性）。

实例：

html:

---

<ul  id="menuList">

<li class="menuLi"  v-for="item in items">

<div>

<span class="menuIcon">

<i v-bind:class="generateClassName(item.menuIcon)"></i>

</span>

<span class="menuTitle" v-bind:title="generateClassName(item.menuTitle)">

{{item.menuTitle}}

</span>

</div>

</li>

</ul>

---

js：

var menuArray=[{"menuTitle":"会员管理","menuIcon":"icon iconfont icon-lijidenglu"},

{"menuTitle":"会员卡管理","menuIcon":"icon iconfont icon--huiyuanqiaqiye"},

{"menuTitle":"活动管理","menuIcon":"icon iconfont icon-cuxiao"},

{"menuTitle":"私教管理","menuIcon":"icon iconfont icon-dianzigongpai"},

{"menuTitle":"销售人员管理","menuIcon":"icon iconfont icon-xiaoshou"},

];

var menuList=new Vue({

el:"#menuList",

data:{

items:menuArray

},

methods: {

        generateClassName(item){

            return item;

        }

    }

})

---

menuArray是我们需要渲染的一级菜单目录，此时需要对应其图标。