对象语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="../vue.js"></script> <div id="app"> <!-- <h2 :style="{key(属性名):value(属性值)}"></h2>--> <!-- <h2 :style="{fontSize:50px}">{{message}}</h2> 50px不加单引号会当成变量,key不用加--> <h2 :style="{fontSize:finalfont}">{{message}}</h2> <h2 :style="{fontSize:finalfont1+'px',finalbackground:finalback}">{{message}}</h2> <h2 :style="getStyles()">{{message}}</h2> </div> <script> const vm = new Vue({ el : '#app', data:{ message:'hello', finalfont:'100px', finalfont1:100, finalback:'red' }, methods:{ getStyles:function () { return {fontSize:this.finalfont} } } }) </script> </body> </html>
数组语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="../vue.js"></script> <div id="app"> <h2 :style="[basestyle,basestyle2]">{{message}}</h2> </div> <script> const vm = new Vue({ el : '#app', data:{ message:'hello', basestyle:{fontSize:'50px'}, basestyle2:{background:'red'} } }) </script> </body> </html>