第7节样式绑定 · vue

#### 1.以对象的方法传值 ~~~ <style> .show{ background: red; } </style> </head> <body> <div id="app"> <p :class="{show:isShow}" @click="handleClick">hello world</p> </div> //show是否显示取决于isShow的值 <script> var vm=new Vue({ el:"#app", data:{ isShow:false }, methods:{ handleClick(){ this.isShow=!this.isShow } } }) </script> </body> </html> ~~~ #### 2.使用数组 ~~~ <div id="app"> <p :class="[isShow]" @click="handleClick">hello world</p> </div> <style> .show{ color: red; } </style> <script> var vm=new Vue({ el:"#app", data:{ isShow:"show" }, methods:{ handleClick(){ this.isShow=(this.isShow=="show")?"":"show" } } }) </script> ~~~ #### 3.style实现样式绑定 ~~~ <div id="app"> <div @click="handleClick" :style="myStyle"> hello world </div> </div> //JS var vm = new Vue({ el:"#app", data:{ myStyle:{ color:"red" } }, methods:{ handleClick(){ this.myStyle.color = (Boolean(this.myStyle.color))?"":"red" } } }) ~~~ #### 4.对象和数组的混用 ~~~ <div :style="[myStyle,{fontSize:'20px'}]"> hello world </div> ~~~