绑定Class的语法为 v-bind:class , 可以简写成 :class
绑定Class时,常用绑定字符串、绑定对象,绑定数组，只有绑定对象时候，css的class引号可以省略
通常我们绑定Class时,可能会用到三目运算, 顺带每种绑定方式使用三目运算举例
一、绑定css中的class字符串
语法v-bind:class="‘样式class’", 引号不可以省略
三目运算 语法v-bind:class=" trueOrFalse ? ‘样式class1’:‘样式class2’"
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
.div{
width:200px;
height:200px;
background-color: burlywood;
}
.div1{
border-radius: 20px;
}
.div2{
width: 200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="'div div1'">
绑定字符串
</div>
<div :class="showStyle ? 'div div1' : 'div2'">
三目运算绑定字符串
</div>
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data() {
return {
showStyle:true,
}
},
});
</script>二、绑定对象 css的class 需匹配真假值
语法v-bind:class="{‘样式class1’:true,样式class2:false}" ,其中’样式class1’的引号可省略
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
.div{
width: 200px;
height:200px;
background-color: burlywood;
}
.div1{
border-radius: 20px;
}
</style>
</head>
<body>
<div id="app">
<div :class="{'div':showStyle,'div1':showStyle1}">
绑定对象
</div>
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data() {
return {
showStyle:true,
showStyle1:true,
}
},
});
</script>三、绑定数组
语法v-bind:class="[‘样式class’, ‘样式class1’, dataModel]",
三目运算 语法v-bind:class="[ true : ? ‘样式class’:‘样式class’,‘样式class’, ‘样式class1’, ]"
数组中使用逗号分隔。其中’样式class1’的引号不可省略;
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
.div{
width: 200px;
height:200px;
background-color: burlywood;
}
.div1{
border-radius: 20px;
}
.div2{
font-size: 20px;
}
.div3{
width: 200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div id="app">
<div :class="['div','div1']">
绑定css的class
</div>
<div :class="[classDiv,classDiv1]">
vue data的model对象
</div>
<div :class="[showStyle ? 'div div1':'div3','div2']">
三目运算绑定css的class
</div>
<div :class="[{div:showStyle,div1:false},'div2']">
数组中使用对象
</div>
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data() {
return {
classDiv:"div",
classDiv1:"div1",
showStyle:true,
}
},
});
</script>
