文章目录
- 绑定class样式
- 通过字符串绑定
- 通过数组绑定
- 通过对象绑定
- 绑定style样式
- 通过对象绑定
- 使用数组的方式绑定
绑定class样式
通过字符串绑定
现在有几组样式。 basic是基本样式必须有，happy、sad、normal这三组样式必选其一，add1、add2、add3这三组样式可以叠加，我们现在将他们添加到某一个元素身上。
按照我们以前的想法，肯定是直接操作DOM，先去获得元素，再去添加。但是使用了Vue我们可以利用数据绑定。如下：
<body>
<!-- 准备好一个容器-->
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
</div>
</body>
<script type="text/javascript">.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'CSDN',
mood:''
},
methods: {
changeMood(){
const li = ['happy','sad','normal']
let rand = Math.floor(Math.random()*3)
this.mood = 'add1 add2 add3' + ' ' +li[rand]
}
},
})</script>
我们把固定类型basic写死在class中，动态变化的类型使用v-bind进行数据绑定。
这种字符串写法，适用于：样式的类名不确定，需要动态指定的情况。
通过数组绑定
接下来我们提出另一个需求：我们可能随时需要 添加/去掉 绑定。
<body>
<!-- 准备好一个容器-->
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
<div class="basic" :class="arr" @click="changeMood1">{{name}}</div>
</div>
</body>
<script type="text/javascript">.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'CSDN',
mood:'',
arr:['add1','add2','add3']
},
methods: {
changeMood(){
const li = ['happy','sad','normal']
let rand = Math.floor(Math.random()*3)
this.mood = 'add1 add2 add3' + ' ' +li[rand]
},
changeMood1(){
this.arr.shift()
}
},
})</script>
这种数组写法，适用于：要绑定的样式个数不确定，名字也不确定。
通过对象绑定
再来一个需求：我们已经确定可能使用两个样式。
<body>
<!-- 准备好一个容器-->
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
<div class="basic" :class="arr" @click="changeMood1">{{name}}</div>
<div class="basic" :class="obj" @click="changeMood2">{{name}}</div>
</div>
</body>
<script type="text/javascript">.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'CSDN',
mood:'',
arr:['add1','add2','add3'],
obj:{
add1:true,
add2:false
}
},
methods: {
changeMood(){
const li = ['happy','sad','normal']
let rand = Math.floor(Math.random()*3)
this.mood = 'add1 add2 add3' + ' ' +li[rand]
},
changeMood1(){
this.arr.shift()
},
changeMood2(){
this.obj.add2 = true
},
},
})</script>
这种对象写法适用于：要绑定的样式个数确定、名字也确定，但动态决定用不用。
绑定style样式
通过对象绑定
例如我们点击缩小字体
代码如下：
<body>
<!-- 准备好一个容器-->
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
<div class="basic" :class="arr" @click="changeMood1">{{name}}</div>
<div class="basic" :class="obj" @click="changeMood2">{{name}}</div>
<div class="basic" :style="styobj" @click="changeMood3">{{name}}</div>
</div>
</body>
<script type="text/javascript">.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'CSDN',
mood:'',
arr:['add1','add2','add3'],
obj:{
add1:true,
add2:false
},
styobj:{
fontSize:'50px'
}
},
methods: {
changeMood(){
const li = ['happy','sad','normal']
let rand = Math.floor(Math.random()*3)
this.mood = 'add1 add2 add3' + ' ' +li[rand]
},
changeMood1(){
this.arr.shift()
},
changeMood2(){
this.obj.add2 = true
},
changeMood3(){
this.styobj.fontSize = '10px'
this.styobj.backgroundColor = 'red'
},
},
})</script>
注意：对象的属性要与css中的属性相对应，带有横杠的命名方式改为驼峰命名法。
使用数组的方式绑定
数组里面装的是样式对象
样式对象的特点就是其中的属性名要与css中的样式相对应
例如：
<body>
<!-- 准备好一个容器-->
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
<div class="basic" :class="arr" @click="changeMood1">{{name}}</div>
<div class="basic" :class="obj" @click="changeMood2">{{name}}</div>
<div class="basic" :style="styobj" @click="changeMood3">{{name}}</div>
<div class="basic" :style="styarr" @click="changeMood4">{{name}}</div>
</div>
</body>
<script type="text/javascript">.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'CSDN',
mood:'',
arr:['add1','add2','add3'],
obj:{
add1:true,
add2:false
},
styobj:{
fontSize:'50px'
},
styobjPro:{
margin:'50px'
},
styarr:[this.styobj]
},
methods: {
changeMood(){
const li = ['happy','sad','normal']
let rand = Math.floor(Math.random()*3)
this.mood = 'add1 add2 add3' + ' ' +li[rand]
},
changeMood1(){
this.arr.shift()
},
changeMood2(){
this.obj.add2 = true
},
changeMood3(){
this.styobj.fontSize = '10px'
this.styobj.backgroundColor = 'red'
},
changeMood4(){
this.styarr.push(this.styobjPro)
},
},
})</script>
总结：
