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

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

2024-11-10 09:11:55 前端知识 前端哥 969 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基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
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的真是我自己写的！！

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

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