1、以对象的方法传值
<style>
/* show是否显示取决于isShow的值 */
.show {
background: pink;
}
</style>
<div id="app">
<p :class="{show:isShow}" @click="handleClick">点我</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isShow: false
},
methods: {
handleClick() {
this.isShow = !this.isShow
}
}
})
</script>
2、使用数组
<div id="app">
<!-- 使用数组 -->
<p :class="[isShow]" @click="handleClick">点zheli</p>
</div>
<script>
new Vue({
el: "#app",
data: {
isShow: "show"
},
methods: {
handleClick() {
this.isShow = (this.isShow == "show") ? "" : "show";
}
}
})
</script>
4、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>