Vue.js 事件绑定 class 和 style 的绑定
周鸿运
一.事件绑定
1.绑定class样式
- 字符串写法
- 对象写法
- 数组写法
2.绑定style样式
- 对象绑定法
下面我们来一一介绍不同方法的使用方法及使用场景，大家可以先看代码中不同方法的使用，看不懂的小编也会在后面讲解的哦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class绑定</title>
<script src="../Vue.js/vue.js"></script>
<style>
.black {
margin: 10px auto;
width: 100px;
height: 100px;
border: 3px rgb(30, 255, 0) solid;
border-radius: 20px;
}
.color {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.cricle {
border: 2px black solid;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="root">
<!-- 绑定class样式--字符串写法 -->
<div class="black" @click='changeColor' :class='color'></div>
<!-- 绑定class样式--数组写法 -->
<div class="black" :class='classArr'></div>
<!-- 绑定class样式--对象写法 -->
<div class="black" :class='classObj'></div>
<!-- 绑定style样式--对象绑定法 -->
<div class="black" :style='styleObj'></div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
color: 'color',
classArr: ['green', 'cricle'],
classObj:{
green:false,
cricle:true,
},
styleObj:{
boxShadow:'0 0 20px red',
backgroundColor:'yellow'
}
},
methods: {
changeColor() {
const arr = ['red', 'green']
const index = Math.floor(Math.random() * 3) //floor向下取整 取0-3之间的数
this.color = arr[index]
}
},
})
</script>
</body>
</html>
class=“black” @click=‘changeColor’ :class=‘color’
1. 此处我们使用了字符串方法绑定class事件 ，此方法适用于:样式类名不确定，需要动态指定
class=“black” :class=‘classArr’
2. 此处我们使用数组方法绑定class事件 ，此方法适用于:要绑定样式个数不确定，名字也不确定
class=“black” :class=‘classObj’
3.此处我们使用对象方法绑定class事件 ，此种方法更灵活,我们可以动态选择我们需要使用的样式或不需要使用的样式，此方法适用于:要绑定的样式个数确定，名字也确定，但要动态决定用不用
class=“black” :style=‘styleObj’
styleObj:{
boxShadow:‘0 0 20px red’,
backgroundColor:‘yellow’
}
4.此处我们使用对象方法绑定style样式，在style事件绑定中我么你可以直接在Vue中编写css样式
二.事件绑定的总结
1.class样式
- 写法：:class=‘xxx’ xxx可以是字符串，对象，数组
(1) 字符串适用于：类名不确定，需要动态指定
(2) 对象适用于：个数不确定，名字也不确定
(3) 数组写法适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用
2.style样式：
(1) :style=’{color:xxx}’ 其中xxx是动态值
(2) :style=’[a,b]'其中a,b是样式对象
类似资料：