[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> ~~~