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)

})

}

Vue.js提供了一个内置的指令v-bind:style，可以用来动态地绑定CSS样式。它允许你使用JavaScript表达式来控制元素的样式，而不是使用静态的字符串。

例如：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

在这里，activeColor和fontSize是JavaScript变量，它们将会被动态地应用到元素上。

---