Vue3之v-bind变色
Vue3之v-bind变色
Vue3之v-bind变色

v-bind变色

1
2
3
4
5
6
/* 核心代码 */
let color-fei = ref("#90ee90");

.text {
  color: v-bind(color-fei);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
  <div>
    <h3 class="fei-color">v-bind 绑定样式</h3>
    <button @click="changeColor">点击我变色</button>
  </div>
</template>

<script setup>
  import {reactive, ref} from "vue";
  let myTheme = reactive({
    bgColor: "#ff6b81",
  });
  let myColor = ref("#90ee90");

  const isChangeColor = ref(false) // 是否改变颜色
  const changeColor = () => {
    if (isChangeColor.value) {
      myTheme.bgColor = "#ff6b81";
      myColor.value="#90ee90"
      isChangeColor.value = false;
    }else{
      myTheme.bgColor = "#808080";
      myColor.value="#00ffff"
      isChangeColor.value = true;
    }
  }
</script>

<style scoped>
  .fei-color {
    width: 200px;
    height: 200px;
    /* background-color: pink; */
    /* color: wheat; */

    /* 对象属性的形式需要加引号 */
    background-color: v-bind("myTheme.bgColor");
    /* 单独的变量引号可加可不加 */
    color: v-bind(myColor);
}
</style>

遇到css函数calc

1
2
3
4
5
6
7
/* 核心代码 */
let size-fei = ref("158px");

.text {
  /** height: v-bind(height); */
  height: calc(100vh - v-bind(size-fei));
}

其他

CSS 中的 v-bind()