首页 前端知识 Vue3 动态修改CSS样式(包含style class)- 附示例

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

2024-11-10 09:11:55 前端知识 前端哥 913 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
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!