数据绑定的一个常见需求场景是操纵元素的CSS的class列表和内联样式
Class绑定的三种方式绑定字符串适用场景：如果确定动态绑定的样式个数只有1个，但是名字不确定需要动态指定
<style>
.static{
border: 1px solid black;
background-color: aquamarine;
}
.big{
width: 200px;
height: 200px;
}
.small{
width: 100px;
height: 100px;
}
style>
<body>
<div id="app">
<h1>{{msg}}h1>
<div class="static small">{{msg}}div>
<button @click="changeBig">变大button>
<button @click="changeSmall">变小button>
<div class="static" :class="c1">{{msg}}div>
div>
<script>
const vm = new Vue({
el : '#app',
data : {
msg : 'Class绑定之字符串形式',
c1 : 'small'
},
methods: {
changeBig(){
this.c1 = 'big'
},
changeSmall(){
this.c1 = 'small'
}
},
})
script>
body>
绑定数组适用场景：当绑定的样式个数不确定，并且样式的名字也不确定的时候
<style>
.static {
border: 1px solid black;
width: 100px;
height: 100px;
}
.active {
background-color: green;
}
.text-danger {
color: red;
}
style>
head>
<body>
<div id="app">
<h1>{{msg}}h1>
<div class="static active text-danger">{{msg}}div>
<div class="static" :class="['active','text-danger']">{{msg}}div>
<div class="static" :class="[c1, c2]">{{msg}}div>
<div class="static" :class="classArray">{{msg}}div>
div>
<script>
const vm = new Vue({
el : '#app',
data : {
msg : 'Class绑定之数组形式',
c1 : 'active',
c2 : 'text-danger',
classArray : ['active', 'text-danger']
}
})
script>
绑定对象适用场景：样式的个数是固定的，样式的名字也是固定的，但是需要动态的决定样式用还是不用
<style>
.static {
border: 1px solid black;
width: 100px;
height: 100px;
}
.active {
background-color: green;
}
.text-danger {
color: red;
}
style>
<body>
<div id="app">
<h1>{{msg}}h1>
<div class="static" :class="{active:true,'text-danger':false}">{{msg}}div>
<div class="static" :class="classObj">{{msg}}div>
div>
<script>
const vm = new Vue({
el : '#app',
data : {
msg : 'Class绑定之对象形式',
classObj : {
// 该对象中属性的名字必须和样式名一致(对象中的属性名都有单引号并且可以省略,但是对于属性名含有划线的单引号不能省略)
active : false,
'text-danger' : true
}
}
})
script>
body>
style绑定的三种方式绑定对象时对象的属性名要采用大驼峰的形式,属性值需要用单引号括起来
<style>
.static {
border: 1px solid black;
width: 100px;
height: 100px;
}
style>
<body>
<div id="app">
<h1>{{msg}}h1>
<div class="static" style="background-color: green;">{{msg}}div>
<div class="static" :style="myStyle">{{msg}}div>
<div class="static" :style="{backgroundColor: 'gray'}">{{msg}}div>
<div class="static" :style="styleObj">{{msg}}div>
<div class="static" :style="styleArray">{{msg}}div>
div>
<script>
const vm = new Vue({
el : '#app',
data : {
msg : 'Style绑定',
myStyle : 'background-color: gray;',
styleObj : {
backgroundColor: 'green'
},
styleArray : [
{backgroundColor: 'green'},
{color : 'red'}
]
}
})
script>
body>