<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多种方式使用VUE控制style样式属性</title> <script src="vue.js"></script> </head> <body> <!--使用变量或是字符串定义样式属性--> <div id="lantian"> <h1 :style="{color:'red',fontSize:size+'px'}">美丽中国</h1> <h1 :style="{color:red,fontSize:'50px'}">美丽中国</h1> <hr /> <input type="number" v-model="size" /> <hr /> <!--object变量定义--> <h2 :style="style">中国美丽</h2> <!--数组定义--> <h2 :style="[ltcms]">中国美丽</h2> </div> <script> var app=new Vue({ el:'#lantian', data:{ red:'green', size:20, style:{ color:'blue', fontSize:'100px' }, ltcms:{ color:'#188eee', backgroundColor:'#999' } } }); </script> </body> </html>