Vue3中动态修改样式与级联样式优先顺序图文详解

更新时间：2023年04月18日 09:57:34 作者：愛彈吉他的小盆友

在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,下面这篇文章主要给大家介绍了关于Vue3中动态修改样式与级联样式优先顺序的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

本编记录了Vue3中动态修改CSS样式的方法，在项目中，经常会遇到CSS样式要变更的地方。

文章后面有对【级联样式优先级顺序】的复习

一、ref修改样式

1、通过 Vue 的 ref 组件获取 DOM 元素节点

通过ref对元素实现动态绑定，可以获取到对应的DOM元素节点，代码如下：

提示：以下代码语法采用Vue3比较精简的setup语法糖展示

<template>
  <div class="squareClass" ref="squareRef">
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
//声明squareRef对应ref对象为一个常量
const squareRef = ref()

onMounted(() => {
  //setup语法用.value获取ref对象的值
  console.log('获取到的DOM对象: ' + squareRef.value)
  console.log(squareRef.value)
})
</script>

浏览器控制台打印结果如下：

注：这边比较一下，和 DOM操作 document.getElementById(‘id’) 这个方法有什么区别

Vue中，在生命周期create阶段ref组件就会对DOM节点进行动态绑定

如果在Vue3中要使用 document.getElementById(‘id’) 这个方法的话

要在onMounted组件中获取节点，代码如下：

<template>
  <div id="squareId">
  </div>
</template>
<script setup>
import {onMounted} from 'vue'

let squareId

onMounted(() => {
  squareId = document.getElementById('squareId')
  //这边和ref的调用区别少了个.value
  console.log(squareId)
})
</script>

浏览器控制台打印结果如下：

2、通过 ref 修改 DOM 元素节点样式

以下代码展示的是通过 ref 来修改样式，代码如下：

<template>
  <div ref="squareRef">
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'

const squareRef = ref()

onMounted(() => {
  //ref修改DOM节点样式,DOM操作document.getElementById('id')的写法一样，只不过去掉了.value，所以原理上是一样的
  squareRef.value.style.width = '200px'
  squareRef.value.style.height = '200px'
  //这边样式名称有点小小的区别，在CSS中背景颜色的属性名称为：background-color，在style对象中的"-"符号不能用来引用属性值
  //所以这边一律使用驼峰命名方式来调取CSS属性或赋值，background-color对应backgroundColor
  squareRef.value.style.backgroundColor = 'greenyellow'
  squareRef.value.style.border = '5px dashed green'
})
</script>

效果展示：

二、通过v-bind对Html元素的样式(style)进行动态绑定

在Vue中，正常的v-bind写法如下：

<div v-bind:style="squareStyle">

在项目使用中，我们普遍会省略掉前面的v-bind，简写的方式如下：

<div :style="squareStyle">

这时候我们只要声明一个变量或常量，初始化该变量或常量的ref的值为css对象

就可以实现样式的动态绑定，代码如下：

提示：以下style样式的动态绑定采用简写:style实现

<template>
  <div :style="squareStyle">
  </div>
</template>
<script setup>
import {ref} from 'vue'

//声明一个常量或变量即可实现样式动态绑定
const squareStyle = ref({
  width: '200px',
  height: '200px',
  backgroundColor: 'skyblue',
  border: '5px dotted blue',
  borderRadius: '110px'
})
</script>

效果展示：

三、v-bind:style动态绑定和ref修改style样式的区别

在Vue中，通过ref组件对style进行动态绑定之后，这个style的对象除了用ref组件重新赋值之外

通过ref.value.style是不能对动态绑定的对象进行修改的。

<template>
  <div ref="squareRef" :style="squareStyle">
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'

const squareRef = ref(),
    squareStyle = ref()

onMounted(()=>{
  //v-bind:style动态绑定
  squareStyle.value = {
    width: '200px',
    height: '200px',
    backgroundColor: 'skyblue',
    border: '5px dotted blue',
    borderRadius: '110px'
  }
  //通过ref组件进行style样式修改
  squareRef.value.style.width = '300px'
  squareRef.value.style.height = '300px'
  squareRef.value.style.backgroundColor = 'greenyellow'
  squareRef.value.style.border = '5px dashed green'
  squareRef.value.style.borderRadius = ''
})
</script>

结果展示：

我明明已经修改了样式，怎么不生效呢？

因为该样式对象已被动态绑定，就算修改了值，也会马上变回去

这时候只有通过修改动态绑定的style对象，才能对其进行修改

代码如下：

<template>
  <div :style="squareStyle">
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'

const squareStyle = ref()

onMounted(() => {
  //第一个样式是天空蓝圆形
  squareStyle.value = {
    width: '200px',
    height: '200px',
    backgroundColor: 'skyblue',
    border: '5px dotted blue',
    borderRadius: '110px'
  }
  //第二个样式是黄绿方块
  squareStyle.value = {
    width: '300px',
    height: '300px',
    backgroundColor: 'greenyellow',
    border: '5px dashed green'
  }
})
</script>

结果展示：

修改的样式会把前一次的样式整个覆盖掉（上面的borderRadius属性不见了），这是需要注意的地方

四、【级联样式优先级顺序】复习

这边我们复习一下关于CSS样式赋值的【级联样式优先级顺序】

下面代码展示三种级联样式的类型：外联式样式、内联式样式、内嵌式样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>级联样式测试</title>
    <!-- 在head标签里用link标签引入的样式文件为【外联式样式】 -->
    <link rel="stylesheet" href="CSS.css" rel="external nofollow"  type="text/css">
    <!-- 在head标签里的style标签为【内联式样式】 -->
    <style>
        .circle {
            /* 这边我们用background-color（背景颜色）来做级联优先级测试  */
            /* 加上【 !important 】最高优先级关键字来进行标注和比较  */
            background-color: greenyellow !important; /* 内联式样式的背景颜色为【黄绿色】 */
        }
    </style>
</head>
<body>
<!-- 在元素标签中，style属性代表级联样式类型中的【内嵌式样式】 -->
<div class="circle"
     style="width: 200px;
            background-color: skyblue !important; /* 内嵌式样式的背景颜色为【天空蓝】 */
            height: 200px;border: 5px blue dashed;
            border-radius: 110px">
</div>
<script>
</script>
</body>
</html>

注：IE6浏览器不支持【 !important 关键字】

【外联式样式】的 CSS.css 文件内容如下：

/* 外联式样式中，背景颜色为【深粉色】 */
.circle {
    background-color: deeppink !important;
}

页面效果展示：

我们来标记一下三个样式级别在页面中圆形的CSS背景颜色：

内嵌式样式： 天空蓝
内联式样式： 黄绿色
外联式样式： 深粉色

所以这边展示后得到的结果说明最高级别的样式为：【 内嵌式样式 】

【级联样式优先级顺序】测试结果如下图所示：

五、总结

实际上，动态绑定style的优先级是大于对style样式进行修改的

这边项目上有时候代码多了，可能忘了某个样式动态绑定过就给它通过style修改了样式

发现不生效，这时候排查问题就会发现它已经有动态绑定的值了

所以才写了这篇来加深记忆和帮助一下遇到同样问题的朋友

到此这篇关于Vue3中动态修改样式与级联样式优先顺序的文章就介绍到这了,更多相关Vue3动态修改样式与级联样式优先顺序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue.js 嵌套循环、if判断、动态删除的实例
下面小编就为大家分享一篇vue.js 嵌套循环、if判断、动态删除的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue2中pinia刷新后数据丢失的问题解决
Pinia是一个Vue.js状态管理库，如果你在组件中修改了store中的数据并刷新了界面，Pinia会将store中的数据重置为初始值，从而导致数据丢失的问题，本文就来介绍一下问题解决，感兴趣的可以了解一下
2023-12-12
vue3.0+echarts实现立体柱图
这篇文章主要为大家详细介绍了vue3.0+echarts实现立体柱图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
Vue2.x通用编辑组件的封装及应用详解
这篇文章主要为大家详细介绍了Vue2.x通用编辑组件的封装及应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
mpvue写一个CPASS小程序的示例
这篇文章主要介绍了mpvue写一个CPASS小程序的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
关于Vue中this.$set的正确使用
我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性，我们该如何解决这个问题呢，下面小编给大家带来了Vue中this.$set的正确使用，感兴趣的朋友跟随小编一起看看吧
2022-12-12
vue按住shift键多选方式(以element框架的table为例)
这篇文章主要介绍了vue按住shift键多选方式(以element框架的table为例),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue 中使用 this 更新数据的一次问题记录
这篇文章主要介绍了vue 中使用 this 更新数据的一次大坑 ,我在 vue 实例中声明了一个数组属性如 books: []，在异步请求的回调函数中使用 this.books = res.data.data; 进行数据更新，感兴趣的朋友跟随小编一起看看吧
2022-11-11
vue.js中created()与activated()的个人使用解读
这篇文章主要介绍了vue.js中created()与activated()的个人使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue打包时不删除dist里的原有文件配置方法
这篇文章主要为大家介绍了vue打包时不删除dist里的原有文件配置方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-11-11