- 使用對象語法：
<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>
