Vue3 使用 v-bind 动态绑定 CSS 样式
<template>
<div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">动态绑定样式</div>
</div>
</template>
<script>
export default {
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
}
</script>
这个例子中,我们使用了v-bind:style
来动态绑定元素的style
属性。activeColor
和fontSize
是在组件的data
函数中定义的响应式属性,它们的值可以动态改变,从而实时更新元素的样式。
评论已关闭