一共用到了兩種方式:
第一種:對象
第二種:數組
看代碼:
<!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>