一、前言

在使用vue动态绑定class及style时可能会出现多场景多逻辑匹配某一标签的情况，致使html代码过于繁杂，不便于阅读维护，通过使用计算属性可以优化该问题。

二、class绑定示例及便捷代码解析

1、场景示例

• 当前场景下类名匹配了多个逻辑，致使行内动态绑定看起来非常繁琐

<template>
  <div class="app">
    <div
      :class="['le',{'boldClass':boldFlag},{'largeClass':largeFlag>10},{'colorClass':colorFlag==='add'}]">这是一段文字
    </div>
    <button @click="boldFlag=!boldFlag;largeFlag+=2">字体加粗且旋转45度--字体变大且加下边框线-{{ boldFlag }}--{{ largeFlag }}</button>
    <button @click="colorFlag==='nothing'?colorFlag='add':colorFlag='nothing'">颜色改变且加内边距外边框---{{ colorFlag }}</button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const boldFlag = ref(false);
const largeFlag = ref(0);
const colorFlag = ref('nothing');
</script>
<style>
.le{width: 200px;margin: 50px auto;}
button {margin-right: 10px;}
.boldClass {font-weight: 900;transform: rotate(45deg)}
.largeClass {font-size: 30px;border-bottom: 2px solid aqua;}
.colorClass {color: red;border: 1px solid red;padding: 5px 10px;}
</style>

2、优化方案

• 通过计算属性将动态绑定class行内判定逻辑移至计算属性

1、非同逻辑判定

<template>
  <div class="app">
    <div :class="classData">这是一段文字</div>
    <button @click="boldFlag=!boldFlag;largeFlag+=2">字体加粗且旋转45度--字体变大且加下边框线-{{ boldFlag }}--{{ largeFlag }}</button>
    <button
      @click="colorFlag==='nothing'?colorFlag='add':colorFlag='nothing'">颜色改变且加内边距外边框---{{ colorFlag }}
    </button>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';
const boldFlag = ref(false);
const largeFlag = ref(0);
const colorFlag = ref('nothing');
// 此处为例
const classData = computed(() => ({
    'le': true,
    'boldClass': boldFlag.value,
    'largeClass': largeFlag.value > 10,
    'colorClass': colorFlag.value === 'add'
  })
);
</script>
<style>
.le {width: 200px;margin: 50px auto;}
button {margin-right: 10px;}
.boldClass {font-weight: 900;transform: rotate(45deg)}
.largeClass {font-size: 30px;border-bottom: 2px solid aqua;}
.colorClass {color: red;border: 1px solid red;padding: 5px 10px;}
</style>

2、同逻辑判定

• 多个动态类名同逻辑时可通过动态类名+判定逻辑写入计算属性

<template>
  <div class="app">
    <div :class="classData">这是一段文字</div>
    <button @click="classFlag=1;classNameFlag='boldClass'">字体加粗且旋转45度---{{ classFlag }}</button>
    <button @click="classFlag=2;classNameFlag='largeClass'">字体变大且加下边框线---{{ classFlag }}</button>
    <button @click="classFlag=3;classNameFlag='colorClass'">颜色改变且加内边距外边框---{{ classFlag }}</button>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';
const classNameFlag = ref('boldClass');
const classFlag = ref(0);
// 此处为例
const classData = computed(() => ({
    'le': true,
    [classNameFlag.value]: classFlag.value > 0
  })
);
</script>
<style>
.le {width: 200px;margin: 50px auto;}
button {margin-right: 10px;}
.boldClass {font-weight: 900;transform: rotate(45deg)}
.largeClass {font-size: 30px;border-bottom: 2px solid aqua;}
.colorClass {color: red;border: 1px solid red;padding: 5px 10px;}
</style>

三、style绑定示例及便捷代码解析

• style绑定原理同class，可通过计算属性实现复杂逻辑，多个动态style的计算属性亦可通过数组形式绑定，css属性名及属性值均可参照class便捷操作复刻。