近期遇见一个需求:点击按钮改变表格边框和文字的颜色。
按道理说这并不是什么难事,但我想要的时在script中定义一个变量,在style中读取。这样一来我就可以通过改变变量来动态改变边框和文字的颜色。
因此我选择了网上说的vars的方法。如:
<style vars="{ border, color }" scoped>
h1 {
color: var(--color);
border: var(--border);
}
</style>
但不知道为什么,vue3中报错,无法使用。
因此我只能使用另一种方式:
<script setup lang="ts" name="WorkZfxxIndex">
//颜色变量
const borderColor = ref ('saddlebrown')
</script>
<style lang="scss" scoped>
table {
border: 1px solid v-bind(borderColor);
}
</style>
这也算是vars的变种吧,但是确实可以正常使用。
记录一下,以待后用。