<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind:style</title> </head> <body> <div id="box" v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">v-bind:style 样式的绑定</div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:"#box", data:{ activeColor:'red', fontSize:30 } }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind:style</title> </head> <body> <div id="box" v-bind:style="styleObject">v-bind:style 样式的绑定 把style写成一个对象</div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:"#box", data:{ styleObject:{ color:'blue', fontSize:'30px' } } }) </script> </html> --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind:style</title> </head> <body> <div id="box" v-bind:style="[baseStyles, overridingStyles]">v-bind:style 样式的绑定 把style写成数组</div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:"#box", data:{ baseStyles:{ color:'red', fontSize:'40px' }, overridingStyles:{ //允许你将多个对象绑定进去，感觉就像class一样。 fontWeight:'bold', textShadow:'5px 5px 10px #333' //有些css属性，例如transform，需要针对不同浏览器加不同前缀，这在vuejs里是自动添加的，无需考虑； } } }) </script> </html>