vue3响应式CSS（真香）

最新推荐文章于 2024-03-04 17:23:24 发布

Griffen-T

最新推荐文章于 2024-03-04 17:23:24 发布

阅读量5.4k

点赞数 2

文章标签： css html 前端 vue-cli3 vue

本文链接：https://blog.csdn.net/qq_43426246/article/details/123018552

版权

我相信很多人在写CSS的时候，突然遇到需要变化的css会使用绑定class样式来实现。这时候就回想如果能定义一个属性并且还是响应式的那就真香了。那么它来了 Vue3

Vue3响应式CSS

在Vue3中可以再css标签中使用v-bind(***) 来绑定一个属性控制它的样式，注意：【如果你的数据不是使用Vue3的 ref 或者 reactive使其变成响应式，那么则不是响应式的】

<template>
  <div class="son">
    <h3>-----Vue编程式Css</h3>
    <button @click="revampColor">修改背景颜色</button>
  </div>
</template>

<script>
import { ref} from "vue";
export default {
  name: "son",
  setup() {
    // ref写法
    let color = ref("red");
    function revampColor() {
      color.value = "blue";
    }
    return {
      color,
      revampCar,
    };
  },
};
</script>

<style scoped>
.son {
  background: v-bind("color");
// 如果是reactive的对象 写法如下 color:{a:'red'}
// background: v-bind("color.a");
  padding: 10px;
}
</style>