css中的v-bind 动态变化

v-bind() 在 <style> 中是 CSS 与组件数据的桥梁 ，可以让你写响应式 CSS，而不需要通过 :style 或类切换来手动更新样式。

<script lang="ts" setup>
const testBindCssVariable = ref('#ff6700')
function changeTestBindCssVariable() {
  if (testBindCssVariable.value === '#ff6700') {
    testBindCssVariable.value = '#67ff00'
  }
  else {
    testBindCssVariable.value = '#ff6700'
  }
}
</script>

<template>
  <button class="mt-4 w-60 text-center" @click="changeTestBindCssVariable">
    toggle v-bind css变量
  </button>
  <view class="test-css my-2 text-center">
    测试v-bind css变量的具体文案
  </view>
</template>

<style lang="scss" scoped>
.test-css {
  color: v-bind(testBindCssVariable);
  font-size: 24px;
}
</style>