『VUE』14. Style绑定（详细图文注释）
warning:
这篇文章距离上次修改已过443天，其中的内容可能已经有所变动。
<template>
<div>
<!-- 使用对象语法绑定style -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 使用数组语法绑定多个style对象 -->
<div :style="[baseStyles, overridingStyles]"></div>
</div>
</template>
<script>
export default {
data() {
return {
activeColor: 'red',
fontSize: 30,
baseStyles: {
display: 'block',
margin: '2px'
},
overridingStyles: {
border: '1px solid #000'
}
}
}
}
</script>这个例子展示了如何在Vue中使用对象语法和数组语法绑定style。对象语法允许直接定义样式属性和值，而数组语法允许合并多个样式对象。这些样式会随着数据的变化而更新。
评论已关闭