Vue3 动态修改CSS样式（包含style + class）- 附示例

目录


效果


 一、介绍


1、官方文档：Class 与 Style 绑定 | Vue.js


2、官方示例


二、示例


1、class


        1）动态class - 真假值


        2）class - 绑定ref


        3）class - 绑定对象


        4）class - 计算属性


        5）class - 数组形式


        6）动态class - 三元表达式


        7）(动态class - 三元表达式) + 固定class


2、style        


        1）style - 绑定变量


        2）style- 绑定对象


        3）style - 数组形式


        4）style - 样式多值


        5）动态style - 三元表达式


        6）动态style - 数组对象 + 三元表达式


        7）动态style - 模板字符串（写法一）


        8）动态style - 模板字符串 （写法二）


          9）动态style - 模板字符（多属性）
————————————————


              
原文链接：https://blog.csdn.net/m0_48968874/article/details/139963973

2、style        



       1）style - 绑定变量




<template>
  <div class="content">
    <div :style="{ color: colorRef, fontSize: fontSize + 'px' }">style - 绑定变量</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const colorRef = ref('#F56C6C');
const fontSize = ref(20);
</script>






 2）style- 绑定对象





<template>
  <div class="content">
    <div :style="styleObject">style- 绑定对象</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const styleObject = reactive({
  'backgroundColor': '#E6A23C',
  'color': '#DCDFE6'
})
</script>






3）style - 数组形式





<template>
  <div class="content">
    <div :style="[colorStyle, fontSizeStyle]">style - 数组形式</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const colorStyle = ref({ color: '#13CE66' });
const fontSizeStyle = ref({ fontSize: '20px' });
</script>






    4）style - 样式多值

       你可以对一个样式属性提供多个 (不同前缀的) 值，举例来说：




<template>
  <div class="content">
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">style - 样式多值</div>
  </div>
</template>




       数组仅会渲染浏览器支持的最后一个值。在这个示例中，在支持不需要特别前缀的浏览器中都会渲染为 display: flex。


       5）动态style - 三元表达式





<template>
  <div class="content">
    <div :style="{ color: valueVM ? '#409EFF' : '#DCDFE6', backgroundColor: valueVM ? '#E6A23C' : '#F56C6C' }">动态style - 三元表达式</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const valueVM = ref(true);
</script>



  6）动态style - 数组对象 + 三元表达式









<template>
  <div class="content">
    <div :style="[{ 'backgroundColor': valueVM ? '#409EFF' : '#DCDFE6' }, { 'color': valueVM ? '#E6A23C' : '#F56C6C' }]">动态style - 数组对象 + 三元表达式</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const valueVM = ref(true);
</script>









 7）动态style - 模板字符串（写法一）





<template>
  <div class="content">
   <div :style="`background-color: ${ valueVM ? '#E6A23C' : '#13CE66' }`">动态style - 模板字符（写法一）</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const valueVM = ref(true);
</script>









  8）动态style - 模板字符串 （写法二）





<template>
  <div class="content">
    <div :style="'background-color:' + `${ valueVM ? '#409EFF' : '#F56C6C' }`">动态style - 模板字符（写法二）</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const valueVM = ref(true);
</script>






 9）动态style - 模板字符（多属性）





<template>
  <div class="content">
    <div :style="{ 'background-color': `${ valueVM ? '#13CE66' : '#DCDFE6' }`, 'color' : `${ !valueVM ? '#fff' : '#E6A23C' }` }">动态style - 模板字符（多属性）</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const valueVM = ref(true);
</script>




https://blog.csdn.net/m0_48968874/article/details/139963973?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522224172805a845fdef057a5499f26281b%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=224172805a845fdef057a5499f26281b&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-139963973-null-null.142^v102^pc_search_result_base7&utm_term=vue3%20%E5%8A%A8%E6%80%81style&spm=1018.2226.3001.4187

二、示例
注：以下示例的样式切换都是基于<el-switch v-model="valueVM" @change="switchChange" />，具体代码在1、的3）部分展示


1、class
        1）动态class - 真假值


<template>
  <div class="content">
    <div :class="{ 'is-true': !valueVM }">动态class - 真假值</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const valueVM = ref(true);
</script>
 
<style scoped>
  .is-true {
    color: #13CE66;
  }
</style>






    2）class - 绑定ref





<template>
  <div class="content">
    <div :class="{ 'color-bind': valueVM }">class - 绑定ref</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const valueVM = ref(true);
const colorRef = ref('#F56C6C');
</script>
 
<style scoped>
  .color-bind {
color: v-bind('colorRef')
  }
</style>






    3）class - 绑定对象





<template>
  <div class="content">
    <el-switch v-model="valueVM" @change="switchChange" />
    <div :class="classObject">class - 绑定对象</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const valueVM = ref(true);
 
const classObject = ref({
  'is-true': true,
  'is-false': false
})
 
const switchChange = (value: boolean) => {
  if (value) {
    classObject.value = {
      'is-true': true,
      'is-false': false
    }
  } else {
    classObject.value = {
      'is-true': false,
      'is-false': true
    }
  }
}
</script>
 
<style scoped>
  .is-true {
    color: #13CE66;
  }
  .is-false {
    color: #E6A23C;
  }
</style>




注：这里用了Element-plus的Switch开关组件，CSS样式根据开关的状态而变化
Switch 开关 | Element Plus


       4）class - 计算属性





<template>
  <div class="content">
    <div :class="classComputed">class - 计算属性</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const isTrue = ref(true);
const isFalse = ref(null);
 
const classComputed = computed(() => ({
  'is-normal': isTrue.value && !isFalse.value,
  'is-error': isFalse.value
}))
 
</script>
 
<style scoped>
  .is-normal {
    color: #409EFF;
  }  
  .is-error {
    color: #F56C6C;
  }
</style>






5）class - 数组形式





<template>
  <div class="content">
    <div :class="[activeClass, errorClass]">class - 数组形式</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const activeClass = ref('active');
const errorClass = ref('is-error');
 
</script>
 
<style scoped>
  .active {
font-size: 1.2rem;
  }
  .is-error {
    color: #F56C6C;
  }
</style>









  6）动态class - 三元表达式





<template>
  <div class="content">
    <div :class="[valueVM ? 'is-false' : 'is-true']">动态class - 三元表达式</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const valueVM = ref(true);
</script>
 
<style scoped>
  .is-false {
    color: #E6A23C;
  }
  .is-true {
    color: #13CE66;
  }
</style>









    7）(动态class - 三元表达式) + 固定class





<template>
  <div class="content">
    <div :class="[valueVM ? 'is-true' : 'is-false', 'active']">(动态class - 三元表达式) + 固定class</div>
  </div>
</template>
 
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
 
const valueVM = ref(true);
</script>
 
<style scoped>
  .is-false {
    color: #E6A23C;
  }
  .is-true {
    color: #13CE66;
  }
  .active {
font-size: 1.2rem;
  }
</style>