菜单 搜索
首页 前端知识 Vue3 动态修改CSS样式（包含style class）- 附示例

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

2024-11-10 09:11:55 前端知识 前端哥 1038 899 我要收藏

在日常的开发过程中，CSS样式根据某个变量的状态或者是变量值的改变而展示不同的属性值是很常见的，故在此记录一些常用的使用场景。

目录

效果

 一、介绍

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 - 模板字符（多属性）

 欢迎扫描下方二维码关注VX公众号

效果

 一、介绍

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

Class 与 Style 绑定 | Vue.jsVue.js - 渐进式的 JavaScript 框架icon-default.png?t=N7T8https://cn.vuejs.org/guide/essentials/class-and-style.html

2、官方示例

​

二、示例

注：以下示例的样式切换都是基于<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>
复制

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>
复制

参考：

Class 与 Style 绑定 | Vue.js

​​​​​​Vue 通过style属性、class属性来动态修改CSS样式_vue动态修改css样式-CSDN博客

 欢迎扫描下方二维码关注VX公众号

转载请注明出处或者链接地址：https://www.qianduange.cn//article/20111.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

前端：HTML

2025-02-23 11:02:50

打造CSS3动态风水罗盘旋转特效

2025-02-23 11:02:49

.net winform 实现CSS3.0 泼墨画效果

2025-02-23 11:02:48

CSS3快速入门

2025-02-23 11:02:48

前端实战2024】Vue2打造科技风个人博客：完整项目从设计到部署 【前端入门必看】Vue2 CSS3开发炫酷博客网站：新手也能快速上手的实战教程 【Vue2项目实战】90分钟从零开发现代科技风博客：

2025-02-23 11:02:48

轻松掌握CSS3最重要的弹性盒子模型（伸缩盒子模型）

2025-02-23 11:02:47

【前端入门必看】手把手带你打开前端的大门（涵盖HTML,CSS3,JS）

2025-02-23 11:02:47

CSS3——transform属性

2025-02-23 11:02:46

css使用伪类元素 实现 卡券圆角 虚线

2025-02-23 11:02:45

React【vite使用模块化css】

2025-02-23 11:02:44

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！