Vue3动态改变css样式的方法，确实很简单很好用

╰+哭是因爲堅強的太久メ 2023-10-10 22:09 28阅读 0赞

直接在setup函数里面使用样式变量，就可以直接绑定到style样式标签中，而且可以动态修改切换，样例代码：

<template>
      <div class="box">
        <div>
          你好，世界
          <button @click="switchColor">切换字体颜色</button>
          <button @click="switchBorder">切换边框颜色</button>
        </div>
      </div>
    </template>
    
    <script setup lang="ts">
    import { ref, reactive } from 'vue'
    
    // 动态样式
    const style = ref('red')
    
    const switchColor = () => {
      style.value = 'orange'
    }
    
    const border = reactive({
      border: '2px solid black'
    })
    
    const switchBorder = () => {
      border.border = '5px solid red'
    }
    </script>
    
    <style scoped>
    .box {
      width: 200px;
      height: 200px;
      color: v-bind(style);
      border: v-bind('border.border');
      padding: 10px;
    }
    </style>

结果样式展示: ![a89b08c79f5747ebbecc0210e68482d2.png][]

点击按钮就可以切换样式：

![2c23762352a3458d88b6a3ea16c6b82d.png][]

[a89b08c79f5747ebbecc0210e68482d2.png]: https://img-blog.csdnimg.cn/a89b08c79f5747ebbecc0210e68482d2.png
[2c23762352a3458d88b6a3ea16c6b82d.png]: https://img-blog.csdnimg.cn/2c23762352a3458d88b6a3ea16c6b82d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关 only office-用着确实很省心

最近一直在使用各种办公软件进行学习笔记整理，但是在使用过程中，总感觉不是自己想要的一款软件，想要一款真正懂自己的软件，是一个选择的过程。最近在网上闲逛发现一款宝藏软件，好...

Love The Way You Lie/ 2024年04月22日 22:12/ 0 赞/ 39 阅读

相关 Vue3动态改变css样式的方法，确实很简单很好用

直接在setup函数里面使用样式变量，就可以直接绑定到style样式标签中，而且可以动态修改切换，样例代码： <template> <div class=

╰+哭是因爲堅強的太久メ/ 2023年10月10日 22:09/ 0 赞/ 29 阅读

相关动态代理&静态代理很好的入门

现业务需求实现：直男的小明在遇到任何一个人问候一句 "你吃了吗"。今天我们经理说了小明打这个招呼太过于直男需要在打招呼之前说一下“hello”，在说完之后

太过爱你忘了你带给我的痛/ 2023年07月06日 14:58/ 0 赞/ 7 阅读

相关很简单很简单的DBHelper类

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

古城微笑少年丶/ 2023年02月27日 10:31/ 0 赞/ 32 阅读

相关 CSS3改变滚动条样式

自定义滚动条实现此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下：滚动条组成部分 1. ::-webkit-scrollbar 滚动

深藏阁楼爱情的钟/ 2023年02月17日 11:23/ 0 赞/ 35 阅读

相关详解react的两种动态改变css样式的方法

第一种：动态添加class，以点击按钮让文字显示隐藏为demo 1 2 3 4 5 6 7 8 9 10 11 12 13

Bertha 。/ 2022年10月15日 00:43/ 0 赞/ 223 阅读

相关 poj2385 很好的动态规划

以前做的 / poj2385 dp[i][j]表示第i分钟移动j次最多苹果数注意初始化不移动时候呆在第一棵树下能吃到的苹果数

青旅半醒/ 2022年08月03日 05:14/ 0 赞/ 185 阅读

相关 CSS Sticky 其实很简单

为什么要写这篇文章 `Sticky` 也不是新知识点了，写这篇文章的原因是由于最近在实现效果的过程中，发现我对 `Sticky` 的理解有偏差，代码执行结果不如预期。决定

阳光穿透心脏的1/2处/ 2022年01月18日 23:45/ 0 赞/ 469 阅读

相关很好的简单样式的日期选择工具

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <T

r囧r小猫/ 2021年11月02日 16:01/ 0 赞/ 290 阅读

相关 Vue动态改变样式实战

目录一点睛二 vue动态改变样式 1 代码 2 效果三通过 computed 改变样式 1 代码 2 效果四通过双向绑定改变样式 1 代码 2

港控/mmm°/ 2021年07月24日 21:21/ 0 赞/ 706 阅读