vue.js怎么动态设置css

template

<ul>

<li v-for="tab in tabs" :class="{ 'is-active': tab.isSelected}">

<a :href="tab.href" @click="selectTab(tab)">{{tab.name}}</a>

</li>

</ul>

script

selectTab(selectedTab) {

this.tabs.forEach(tab =>{

tab.isSelected = (tab.name == selectedTab.name)

})

}

给每个a标签绑定一个方法，并传入当前对象作为参数

当点击时遍历所有a标签，比较当前遍历对象的某个属性（例子中的name)与传入对象的某个属性

比例结果赋值给一个flag（例子中的isSelected属性）,由这个flag去控制：class

从而实现数据驱动样式

按需加载，可样式是写在.vue模板中的，访问另一个页面样式就会追加到head标签中，访问的越多head标签的style标签也就越多，即便style标签加入scoped可以避免样式冲突:

后来我查了下有使用extract-text-webpack-plugin将css提取合并的。

这个代码：

import 'xx.css' or require('xx.css')

---