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>