Vue3中CSS的新玩法-CSS模块 & 动态CSS

html-css057

Vue3中CSS的新玩法-CSS模块 & 动态CSS,第1张

Vue3对CSS支持加入了更多的特性支持，这样的话，我们在项目当中使用CSS就变得更加灵活了，来吧我们直接上干货

在style的标签上加一个module的属性，这样style里面的内容就会被编译成CSS Modules（模块），默认情况下，我们可以在模板代码里，或者JS里通过$style拿到所有样式属性并使用

我们也可以给CSS Modules自定义一个名称，在style的module属性设置一个名称就可以了,这样的话在模板和JS里就通过自定义的名称来引入CSS里的属性

与组合式 API 一同使用，注入的类可以通过 useCssModule API 在 setup() 和.success { color: #090}

可以通过 v-bind 这一 CSS 函数将 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

从而实现数据驱动样式