从 Vue.js3.2 开始,可以将 JavaScript 变量绑定为 CSS 变量。这意味着可以动态设置 CSS 值。
如下面的例子:
<script setup lang="ts">
const color = ref('#000000')
</script>
<template>
<div>
<h1 class="title">选取颜色</h1>
<input type="color" v-model="color" />
</div>
</template>
<style scoped>
.title {
color: v-bind(color);
}
</style>
我们声明的color变量,可以在<style>
标签中,用v-bind(color)
绑定。
查看生成的 CSS:
![image.p
评论(0)