vue中动态添加style样式的写法有哪些

1. 使用对象语法：

<template>   <div :style="dynamicStyles"></div> </template>  <script> export default {   data() {     return {       dynamicStyles: {         color: 'red',         fontSize: '16px',       }     };   } }; </script> 

2. 使用数组语法：

<template>   <div :style="[baseStyles, dynamicStyles]"></div> </template>  <script> export default {   data() {     return {       baseStyles: {         color: 'blue',         fontSize: '14px',       },       dynamicStyles: {         color: 'red',         fontSize: '16px',       }     };   } }; </script> 

3. 使用计算属性：

<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>