vue.js怎么动态设置css

JavaScript028

vue.js怎么动态设置css,第1张

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)

})

}

$ 符号 被 Sass 占用

@ 符号 被 less 占用

因此CSS中采用了 --

JS:

可以看到var只是个声明变量的关键字，color才是变量名。

PHP:

Scss:

CSS在使用变量的时候用到了一个函数叫var()：

CSS:

创建个支持vue3的vite项目

进入到该文件夹

安装依赖

创建一个组件

使用中文引入变量

参考：

Vue 超好玩的新特性：在 CSS 中使用 JS 变量