[TOC] ## 1.以对象的方法传值 ~~~ <div id="app"> <div @click="handleClick" :class="{show:isShow}"> hello world </div> </div> //show是否显示取决于isShow的值 .show{ color:red; } ~~~ ~~~ var vm = new Vue({ el:"#app", data:{ isShow:false }, methods:{ handleClick(){ this.isShow = !this.isShow; } } }) ~~~ ## 2.使用数组 ~~~ <div id="app"> <div @click="handleClick" :class="[isShow]"> hello world </div> </div> ~~~ ~~~ var vm = new Vue({ el:"#app", data:{ isShow:"show" }, methods:{ handleClick(){ this.isShow = (this.isShow=="")?"show":"" } } }) ~~~ ## 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> ~~~