//index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="vue-app"> <div v-bind:class="{change:changecolor,square:!changecolor}" v-on:click="changecolor=!changecolor" >样例一</div> <!-- class里面的属性只有两个，要么true，要么false，绑定的是change样式，但是初始值changecolor是false，所以这个css样式还是为square样式 这里我自己添加的是两个属性，是为了防止别的div进行的不是该绑定 --> <button v-on:click="changecolor=!changecolor">press</button> <!-- <div v-bind:class="classObject"> <span>样例二</span> </div> --> </div> <script src="app.js"></script> </body>
//style.css
.square
{
background-color:#FF0000;
width:100px;
height:100px;
border:solid 1px black;
}
.change
{
background-color:#99FFCC;
width:100px;
height:100px;
border:solid 1px black;
}
//app.js
new Vue({
el:"#vue-app",
data:
{
changecolor:false,
},
});
样例一：
首先，绑定事件，当点击时，changecolor值会变相反
v-bind属性绑定，我们可以传给 v-bind:class 一个对象，以动态地切换 class
{change:changecolor,square:!changecolor}
初始，changecolor为false，所以，不为change样式而是square样式。
在这里，无论是点击按钮，还是点击square，都可以对方框中的颜色进行改变
PS：计算属性那里出了不知名bug，暂时找不出来问题在哪，暂且搁置一下，以后知道怎么解决再回来修改！！！