vue.js入门(10)动态绑定css样式
//index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><li
·
//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/vue@2.5.16/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,暂时找不出来问题在哪,暂且搁置一下,以后知道怎么解决再回来修改!!!
更多推荐
已为社区贡献4条内容
所有评论(0)