一、动态类名

通过定义和更改动态变量，控制类名变动；
类名较多时可以为一个对象，分别通过不同条件控制当前类名是否生效；
类名较富哦时可以为一个数组，分别通过不同条件控制当前类名是否生效；
单个条件可控制多个类名, 用空格隔开；
类名控制条件可以以计算属性为依据，此外例如方法的返回值、监听结果等等；
动态控制组件的样式，条件符合的类名会与组件本身样式合并，样式冲突时会有优先级问题；
也可数组嵌套对象进行组合使用，在此不做演示。

<template>
  <div class="box">
    <!-- 基础用法 -->
    <!-- 通过定义和更改动态变量，控制类名变动 -->
    <div :class="classFlag ? 'active' : 'text'">这是一段内容</div>

    <!-- 对象控制 -->
    <!-- 类名较多时可以为一个对象，分别通过不同条件控制当前类名是否生效 -->
    <div :class="{ 'cont': true, 'active': classFlag, 'text': !classFlag }">又是一段内容</div>

    <!-- 数组控制 -->
    <!-- 类名较多时可以为一个数组，分别通过不同条件控制当前类名是否生效 -->
    <div :class="['cont', classFlag ? 'active' : 'text']">还是一段内容</div>
    
    <!-- 灵活运用 -->
    <!-- 单个条件可控制多个类名,用空格隔开 -->
    <!-- 类名控制条件可以以计算属性为依据，此外例如方法返回值、监听结果等等 -->
    <div :class="price > 200 && price < 240 ? 'cont active' : 'text'">一段内容</div>
    
    <!-- 控制组件样式 -->
    <!-- 动态控制组件的样式，条件符合的类名会与组件本身样式合并 -->
    <leOne :class="classFlag ? 'active' : 'text'"></leOne>

    <button @click="classChange">类名变动</button>
  </div>
</template>
<script setup>
// 引入
import { ref, reactive, toRefs, computed } from 'vue';
const data = reactive({
  classFlag: false,
  num: 76
})
let classChange = () => {
  data.classFlag = !data.classFlag
  data.num += 10
}
let price = computed(() => {
  return data.num + 100
})
// 解构数据
const { classFlag } = toRefs(data)
</script>
<style scoped lang="scss">
.box {
  >div {
    margin: 20px;
  }
}

.text {
  color: aqua;
}

.active {
  color: pink;
}

.cont {
  font-size: 40px;
  font-weight: 900;
}
</style>

二、动态样式

通过定义和更改动态变量，控制样式变动；
定义css变量对象,通过修改对象中的值来变动样式；
注意：例如'background-color'、'font-size'等样式需要去除横杠，使用小驼峰命名；
通过不同的对象组合为样式数组。

<template>
  <div class="box">
    <!-- 基础用法 -->
    <!-- 通过定义和更改动态变量，控制样式变动 -->
    <div :style="{ 'width': num + 'px', 'background-color': bgc, }">这是一段内容</div>

    <!-- 设置css变量对象,通过修改对象中的值来变动样式 -->
    <!-- 注意：例如'background-color'、'font-size'等需要去除横杠，使用小驼峰命名 -->
    <div :style="styleObj">这是一段内容</div>

    <!-- 数组控制 -->
    <!-- 通过不同的对象组合为样式数组 -->
    <div :style="[styleObj, styleObj1]">还是一段内容</div>

    <button @click="styleChange">样式变动</button>
  </div>
</template>
<script setup>
// 引入
import { reactive, toRefs } from 'vue';
const data = reactive({
  num: 76,
  bgc: 'pink',
  styleObj: {
    color: 'pink',
    fontSize: '26px',
  },
  styleObj1: {
    backgroundColor: 'yellow',
    fontWeight: 900
  }
})
let styleChange = () => {
  data.bgc = data.bgc == 'pink' ? 'aqua' : 'pink'
  data.num += 10
  data.styleObj.color = data.styleObj.color == 'pink' ? 'red' : 'pink'
}
// 解构数据
const { num, bgc, styleObj, styleObj1 } = toRefs(data)
</script>
<style scoped lang="scss">
.box {
  >div {
    margin: 20px;
  }
}
</style>

vue动态类名、动态样式

一、动态类名

二、动态样式