vue.js怎么动态设置css

发布网友 发布时间：2022-03-27 13:44

我来回答

共1个回答

热心网友 时间：2022-03-27 15:14

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
从而实现数据驱动样式