Vue.js 关于Vue的事件绑定 style和class的事件绑定
【摘要】 一.事件绑定1.绑定class样式字符串写法对象写法数组写法2.绑定style样式对象绑定法下面我们来一一介绍不同方法的使用方法及使用场景，大家可以先看代码中不同方法的使用，看不懂的小编也会在后面讲解的哦<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp...
一.事件绑定
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是样式对象
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）