效果：
点击前：
image.png
点击后：
image.png
代码(要以数组的方式来实现)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.isClick{
width: 100px;
height: 100px;
background: blue;
}
.isNormal{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="[isChecked ? 'isClick' : 'isNormal']"></div>
<button v-on:click="changeStyle" style="margin-top: 20px;">点击切换样式</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
isChecked:false
},
methods:{
changeStyle:function(){
this.isChecked = !this.isChecked;
}
}
});
</script>
</html>
网友评论