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

于 2024-08-19 08:00:00 发布
阅读量3.8k 收藏 47
点赞数 33
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48968874/article/details/139963973
版权

在日常的开发过程中，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公众号

Web - Nancy
关注
Vue3 - style v-bind 动态样式（详细使用教程）
王佳斌
11-13 8154
Vue3 官方文档教程，vue3.js style v-bind 动态样式如何使用，Vue3动态样式你不会吗，Vue指令中的v-bind之动态更改样式，Vue3 样式绑定 | 菜鸟教程，Vue:动态绑定样式(v-bind)，vue系列教程-07vue动态绑定样式，Vue中Class和Style实现v-bind绑定的几种用法，Vue3 - style v-bind 动态样式（详细使用教程）。
【JavaScript源代码】Vue+element-ui添加自定义右键菜单的方法示例.docx
12-30
### Vue + Element UI 添加自定义右键菜单的知识点解析 #### 一、概述 本文将详细介绍如何在基于Vue.js框架的项目中结合Element UI库，实现一个简单的自定义右键菜单功能。通过以下步骤，您将了解到从创建绑定事件...
Vue 动态改变css文件
最新发布
xy的博客
07-29 950
theme: smartblue 一、背景需求 现有 Vue3 项目，要求点击按钮后，会动态加载css文件内容 二、实现过程 2.1 相关代码 假设有 blue.css 和 red.css,要求点击加载对应文件 若想切换为原版样式，点击 back 回退到初始样式 ``` this is a simple text to red to blue back ...
vue3怎么动态使用style
肥晨开发的学习之路
09-23 9333
以上是几种常见的动态使用样式的方法。你可以根据具体的需求选择适合的方式来动态设置样式。方法会在每次重新渲染组件时调用，从而动态生成样式对象。都是样式对象，它们会合并应用到元素上。对象中根据需要动态设置样式属性。
VUE3 学习笔记（七）动态样式 class 实现
sensor_WU 博客
04-08 1万+
本文介绍了VUE中动态设置CSS和Style的方法。
Vue动态样式方法总结
热门推荐
Allen_Sushi首页
09-14 3万+
Vue动态页面
vue基础-动态style
佐杰的博客
07-30 5322
给标签动态设置style值。
vue 中 如何动态修改css样式内容
longwen999的专栏
06-13 7056
vue 中 如何动态修改css样式内容
vue-cli3+ts+webpack实现多入口多出口功能
12-08
在 Vue CLI 3 中，我们不能直接修改webpack配置，但可以通过创建 `vue.config.js` 文件来自定义配置。在这个文件中，我们可以利用 `glob` 模块找到所有的入口文件，并使用 `webpack-merge` 来合并配置。以下是一个...
vue.js+element-ui动态配置菜单的实例
10-18
使用 `:class` 绑定来切换不同的 CSS 类，从而改变菜单的显示样式。 7. **优化处理**： 当菜单项的 `leaf` 属性为 `true` 且有子菜单时，可以优化显示，只显示第一个子菜单项。这适用于只有一个操作的子菜单情况。...
vue2.0+vue-router构建一个简单的列表页的示例代码
10-17
/* ...CSS样式... */ </style> ``` 为了实现路由功能，我们需要在`router/index.js`文件中定义路由映射。例如，创建`Home`组件，并配置两个路由： ```javascript import Home from '@/components/Home' import Vue...
vue2.0+vue-dplayer实现hls播放的示例
08-27
这个示例不仅展示了如何在Vue 2.0中使用vue-dplayer实现HLS播放，还涵盖了如何处理组件自定义和外部库的引入。对于开发者来说，了解这些基本操作是构建复杂Web应用的基础。通过这样的实践，你可以更好地掌握Vue.js与...
vue3之基础语法 动态class :class :style
weixin_43845137的博客
03-03 3368
目录vue3之基础语法基础的样式写法动态样式之 对象写法动态样式之 数组写法v-for循环v-model vue3之基础语法 基础的样式写法 动态样式之 对象写法 方法1 用ts定义当前对象的type数据类型 type style 定义当前的样式的数据 const style 定义当前显示的 数据 msg <template> <div> <div :style="style">{{ msg }}</div> </div>
Vue 动态改变css
LeeBingNing的博客
03-16 1万+
两种方式动态改变css
Vue动态绑定class
qq_44998582的博客
01-07 2万+
我们在学习js时有学到过如何去动态切换元素的样式，具体有以下步骤： 先获得元素 修改样式。通过className或者style修改 <head> <style> .class1 { border: 1px solid black; height: 20px; width: 20px; } </style> </head> <body> <div id...
VUE3 style 用法
God's asylum的博客
07-17 4451
vue3 style用法
Vue动态绑定Class与Style
长沙火山
03-17 4985
这样可以根据数据的变化来动态改变元素的样式，实现更灵活的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该添加哪些类，实现更复杂的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该具有哪些样式，实现更灵活的样式控制。这样，我们可以根据多个条件的组合来动态控制元素的样式，使页面更具交互性和灵活性。数组语法，可以实现更复杂的样式控制，根据多个条件的组合来动态改变元素的样式，满足不同的需求。通过数组语法，可以根据多个条件的组合来动态控制元素的样式，实现更灵活的样式控制。
vue3(一)-基础入门之指令以及动态设置 class、style属性
weixin_43520586的博客
11-25 5196
/constcreateAppdatareturnmessage1mount'#app'
vue3+ ant-design-vue 样式
08-16
要在Vue3中使用Ant Design Vue的样式，可以按照以下步骤进行操作： 1. 首先，在你的项目中安装Ant Design Vue组件库。你可以通过npm或者yarn进行安装，具体的安装命令可以在Ant Design Vue的官方文档中找到。 2. 在你的Vue组件中引入Ant Design Vue的样式文件。你可以在组件所在的Vue文件中使用import语句引入Ant Design Vue的样式文件。 例如，在你的Vue文件中添加以下代码： ```javascript <style lang="less" scoped> @import '~ant-design-vue/dist/antd.less'; </style> ``` 这将会导入Ant Design Vue的样式文件，并使它只在当前组件中生效。 3. 接下来，你可以根据需要自定义你的组件样式。你可以在style标签中使用普通的CSS语法来定义和修改组件的样式。 例如，你可以在style标签中添加以下代码来自定义一个按钮组件的样式： ```javascript <style lang="less" scoped> .my-button { border-radius: 10px; } </style> ``` 这将会给按钮组件添加一个圆角为10px的边框样式。 通过以上步骤，你就可以在Vue3中使用Ant Design Vue的样式了。记得按照官方文档中的指引导入需要的组件，并在模板中使用它们。如果你需要更多示例和帮助，可以参考官方文档或者Ant Design Vue的开源项目。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3+ant design vue+ts实战【ant-design-vue组件库引入】](https://blog.csdn.net/XSL_HR/article/details/127396384)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue3+ant-design-vue按需加载组件](https://blog.csdn.net/qq_42263570/article/details/130143934)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue3+element-plus的后台管理系统模板 和 vue3+ant-design-vue的后台管理系统模板](https://blog.csdn.net/qq_61233877/article/details/131008600)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值