- 使用对象语法：
<template>
<div :style="dynamicStyles"></div>
</template>
<script>
export default {
data() {
return {
dynamicStyles: {
color: 'red',
fontSize: '16px',
}
};
}
};
</script>
- 使用数组语法：
<template>
<div :style="[baseStyles, dynamicStyles]"></div>
</template>
<script>
export default {
data() {
return {
baseStyles: {
color: 'blue',
fontSize: '14px',
},
dynamicStyles: {
color: 'red',
fontSize: '16px',
}
};
}
};
</script>
- 使用计算属性：
<template>
<div :style="computedStyles"></div>
</template>
<script>
export default {
data() {
return {
color: 'red',
fontSize: '16px',
};
},
computed: {
computedStyles() {
return {
color: this.color,
fontSize: this.fontSize,
};
}
}
};
</script>
