Vue3 之动态绑定 class

在日常开发中，我们经常会动态地给一个元素增加或者删除一个 class，来更改它的样式 比如选中了一个元素，那么给它加一个 class 叫 active，同时其他元素要删除 active 这个 class

我们这节课来学习在 vue 中如何动态的控制元素的 class 属性 我们给一个元素增加:class（v-bind:class 的简写）来动态切换 class

<div :class="{active: hasFocus}"></div>

这里:class 接受的是一个 js 对象，这个对象的键 active，就是我们要动态切换的 class 的名称，值 hasFocus 可以理解为是一个 Boolean 型的值，

data() {
  return {
    hasFocus: true,
  }
}

如果 hasFocus 是一个真值时，在元素上就会加上对应的 class，渲染结果就是

<div class="active"></div>

如果 hasFocus 是一个假值时，在元素上就不会有 active 这个 class，渲染结果就是

<div class></div>

如果同一个元素，有多个 class 需要动态控制，只需要在对象内增加多个键值就行了，如果有固定的 class，按普通的 html 的方式写就行了 class 和:class 两个属性可以同时存在

<div class="static" :class="{ active: hasFocus, 'large-size': isLarge}"></div>

Vue3 之动态绑定 style

常用来主题更换

首先在 style 绑定一个变量

:style="styleObject"

定义 2 个变量

const activetextcolor = ref("#ff0000");
const styleObject = ref({
  "--hovercolor": activetextcolor.value,
});

css 里面写

.el-menu-item {
  &:hover {
    background: none !important;
    color: var(--hovercolor) !important;
  }
}