Vue3 v-bind绑定css中的var变量实现动态样式

最新推荐文章于 2025-03-25 21:31:59 发布

秋秋小事

最新推荐文章于 2025-03-25 21:31:59 发布

阅读量1.4k

点赞数 1

分类专栏： Vue学习笔记文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/jiaoyangdetian/article/details/137640496

版权

在日常的开发中，我们常常遇到这样的需求：点击一个button改变页面中某个元素的样式，在这样的场景中，我们可以使用v-bind绑定css中的var变量，来动态的切换元素的样式

一个小栗子，在setup语法糖环境下，点击一个button动态切换另一个元素的背景色

<template>
  <div class="box">
    <div class="intro">
      <div class="btxt" :style="{'--text-color':textColor}">使用v-bind绑定语法糖中的颜色常量的值给style中的变量</div>
    </div>
    <div class="intro">
      <div class="btn" @click="changeColor">点击button改变textColor的值，动态更新颜色的值</div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const textColor = ref("blue");
const changeColor = () => {
  if (textColor.value === "blue") {
    textColor.value = "pink";