<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue class绑定</title>
<style>
div{
width: 50px;
height: 50px;
background: blue;
}
.active{
background: red;
}
div:active{
background: black;
}
p{
width: 100px;
height: 100px;
background: blue;
}
.bgred{
background-color: red;
}
.bgblack{
background-color: black;
}
</style>
</head>
<body>
<div id="a">
<div class="tab" v-bind:class="{'active':active,'unactive':!active}">
</div>
<div v-bindclass="[classA,classB]"></div>
<p class="bgred bgblack">
</p>
<hr>
<p :class="{bgred:colorred,bgblack:aaa}">
</p>
</div>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:"#a",
data:{
active:true,
colorred:true,
aaa:true
// 通过修改vm对象 的值来实现动态切换效果
// v-bind也接受数组作为参数
classA:'class-a',
classB:'class-b'
}
})
</script>
</body>
</html>
网友评论