使用对象语法:
<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>