Vue3 使用 v-bind 动态绑定 CSS 样式
warning:
这篇文章距离上次修改已过430天，其中的内容可能已经有所变动。
<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函数中定义的响应式属性，它们的值可以动态改变，从而实时更新元素的样式。
评论已关闭