vue11-內聯樣式繫結
阿新 • • 發佈：2018-12-11
首先看程式碼：
<!DOCTYPE html> <html lang=en> <head> <meta charset="utf-8"/> <title>Hello world</title> <script src="vue.js"></script> </head> <body> <div id="root"> <!-- 也可以寫陣列 --> <div :style="styleObj" @click="handleDivClick"> Hello world </div> </div> <script> var vm = new Vue({ el:"#root", data: { styleObj:{ color:"black", fontSize:"30px" } }, methods:{ handleDivClick: function(){ this.styleObj.color=this.styleObj.color==="black"?"red":"black"; } } }) </script> </body> </html>
sytle屬性繫結vue例項中的styleObj變數，給styleObj變數賦值，渲染後就會賦值給style屬性。
