css中使用v-bind（v-bind in css）

vue3单文件组件的 <style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态.

示例：

<template>
    <div class='text'>hello world</div>
</template>

<script setup>
import {ref} from 'vue'
const color = ref('red')
</script>

<style scoped>
.text{
    color:v-bind(color)
}
</style>

实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。

v-bind使用方式

假设存在变量COLOR:'red'、obj:{ COLOR:'red'}

直接使用（推荐）:
color:v-bind(COLOR)

对象调用使用（推荐）：
color:v-bind('obj.COLOR')(需要用引号包裹起来)

组合使用（推荐）：
border:1px solid v-bind(COLOR)

拼接使用（不推荐,容易产生未知bug）： 
border:v-bind('1px solid '+ COLOR)

表达式使用（不推荐）： 
color:v-bind('true?'red':'blue'')

使用css的v-bind是为了简化代码，方便开发。如果变量需要处理，建议使用computed属性。

v-bind使用场景

目前在工作中遇到的使用场景，是DOM的属性需要动态进行调整。

以下是一个项目需求：

当前布局页面有一个底部面板和右侧面面板。初始化的时候，面板处于隐藏状态。 点击手柄，底部面板和右侧面板依次出现。要求两个面板面积相适应，不能覆盖对方。

底部面板代码

<template>
  <div class="zdyzl-float-box bottom-panel">
    <div class="el-icon-caret-right" @click="togglePanel">
      <el-icon>
        <CaretRight />
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, inject } from "vue";
import useStore from "@/stores/counter";
const user = useStore();

// 高度
const panelHeight = computed(() => (user.hideBottomPanel ? "-300px" : "0px"));
// 宽度
const panelWidth = computed(() =>
  user.hideRightPanel ? "calc(100% - 300px)" : "calc(100% - 300px - 300px)"
);

const togglePanel = () => {
  user.hideBottomPanel = !user.hideBottomPanel;
};
</script>

<style lang="scss" scpoed>
.bottom-panel {
  height: 300px;
  bottom: v-bind(panelHeight);
  width: v-bind(panelWidth);
  left: 300px;
  .el-icon-caret-right {
    left: 50%;
    top: -30px;
    transform: rotate(90deg);
  }
}
</style>