一共用到了两种方式:
第一种:对象
第二种:数组
看代码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js 多种方式控制class属性 </title> <script src="vue.js"></script> <script src="node_modules/axios/dist/axios.js"></script> <script src="node_modules/lodash/lodash.js"></script> </head> <body> <div id="ask"><!--vue不能控制body和html的标签--> <h1 :style="{color:red,fontSize:size+'px'}">简单记录</h1> <input type="text" v-model="size"> <h1 :style="style">简单记录</h1> <h1 :style="[mykeji]">简单记录</h1> </div> <script> var app = new Vue({ //实例化vue el:'#ask',//vue控制id为ask的元素, data:{ red:'green', size:16, style:{ color:'blue', fontSize:'200px' }, mykeji:{ color:'red', fontSize:'100px' } }, }); </script> </body> </html>