Vue3 第二十六篇：响应式Css

最新推荐文章于 2024-06-28 12:04:58 发布

文子阳

最新推荐文章于 2024-06-28 12:04:58 发布

阅读量633

点赞数

分类专栏： vue Vue3 文章标签：大数据

本文链接：https://blog.csdn.net/wenxingchen/article/details/125445328

版权

vue 同时被 2 个专栏收录

101 篇文章 24 订阅

订阅专栏

42 篇文章 13 订阅

订阅专栏

在css中可以直接绑定js中的变量，改变变量，css做出相应的响应。

<script setup lang='ts'>
import { ref } from 'vue';

let mindColor = ref('red')
const change = () => {
    if (mindColor.value == 'blue') {
        mindColor.value = 'red'
    } else {
        mindColor.value = 'blue'
    }

}
</script>

<template>
    <div>
        <h1 class="home">主页</h1>
        <el-button type="primary" size="default" @click="change">切换按钮</el-button>
    </div>
</template>

<style lang='less' scoped>
.home {
    color: v-bind(mindColor)
}
</style>