前言

最近的任务是改版一套后台管理模板，管理模板项目配置中有不同的系统风格，改版时需要考虑在这个模式下的样式又要兼顾其他模式下的样式，这种情况，以往的方式通常是设置两个class，给定不同的样式，判断变量赋值不同的类名或直接修改不同的样式。

Vue3有一个新特性，来改进以前这种繁琐的写法

CSS 中的 `v-bind()`

以两个简单的小例子介绍一下它的用法

实现这样的效果，之前我们是这样写的

现在我们可以这样，在CSS中用v-bind直接绑定变量判断取值

例1：

<template>
  <div class="box" @click="changeColor"></div>
</template>

<script setup>
import { ref } from 'vue'
const isClick = ref(true)
const changeColor = () => {
  isClick.value = !isClick.value
}
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  
  background-color: v-bind("isClick ? 'red': 'green'");
}
</style>

我们还可以将颜色直接赋值给变量，使用v-bind绑定变量

例2

<template>
  <div class="box" @click="changeColor"></div>
</template>

<script setup>
import { ref } from 'vue'
const bgColor = ref('red')
const changeColor = () => {
  bgColor.value = bgColor.value === 'green' ? 'red' : 'green'
}
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: v-bind(bgColor);
}
</style>

Vue3 css v-bind的使用是不是很简单，利用起来吧。

关于他的实现原理，一句话带过使用了css自定义属性，感兴趣的大家可以自行了解一下

不要忽略他！vue3新特性css中的v-bind

前言

CSS 中的 v-bind()

CSS 中的 `v-bind()`