-
Vue组件的样式绑定和事件监听处理
一、Vue组件的样式绑定
1、为Html标签绑定class属性：v-bind，为class属性绑定一个对象，在对象中可以设置对象是否可用
1.1、绑定class属性,由绑定的变量来决定应用哪个样式
1.2、可以将样式直接设置成Vue组件中的数据对象
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>Documenttitle> <script src="https://unpkg.com/vue@next">script> head> <style> .blue{ color: blue; } .red{ color: red; } .green{ color: green; } .font{ font-size: 30px; } style> <body> <div id="app"> <div v-bind:class="{blue:isblue,red:isred}"> 西安 div> <div v-bind:class="[greenClass,fontClass]"> 郑州 div> <div :class="style"> 武汉 div> div> <script> const obj={ data(){ return{ style:{ blue:true, red:false }, isblue:true, isred:false, greenClass:'green', fontClass:'font', textColor:'red', textFont:'35px' } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
注意：v-bind可以缩写为:
2、绑定内联样式
<div :style=""></div>- 1
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>Documenttitle> <script src="https://unpkg.com/vue@next">script> head> <style> .blue{ color: blue; } .red{ color: red; } .green{ color: green; } .font{ font-size: 30px; } style> <body> <div id="app"> <div :style="{color:textColor,fontSize:textFont}"> 济南 div> div> <script> const obj={ data(){ return{ textColor:'red', textFont:'35px' } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
注意：
内联的CSS样式属性名与外部的CSS样式属性名有区别的。
内联的CSS样式属性名：通常采用驼峰命名.例如:fontSize
外部的CSS样式属性名：采用’-'进行连接.例如： font-size二、Vue的事件监听和处理
1、事件监听：是通过v-on指令(用@符号代替)绑定事件处理程序
2、多事件的处理：对于同一个用户交互事件，需要调用多个方法进行处理
2.1、获取事件类型：$event
2.2、多事件处理的语法格式：@事件名 = “方法1,方法2”
演示：
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>Documenttitle> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <div>点击次数 {{ count }}div> <button @click="myclick(2),logs($event)">点击button> div> <script> const obj={ data(){ return{ count:0 } }, methods:{ myclick(step){ this.count+= step }, logs(event){ console.log(event) } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
3、事件修饰符
3.1、DOM的事件原理：
首先会从父组件开始依次传递到子组件 — 事件捕获
其次当事件传递到最内层的子组件时，会逆向再进行一次传递，从子组件依次向上传递 — 事件冒泡
3.2、Vue中使用v-on指令绑定事件时默认监听的是DOM事件的冒泡阶段
演示：
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>Documenttitle> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <div id="d1" @click="click1" style="border: solid red 1px;"> 外层 <div id="d2" @click="click2" style="border: solid blue 1px;"> 中间 <div id="d3" @click="click3" style="border: solid green 1px;"> 内层 div> div> div> div> <script> const obj={ methods:{ click1(){ console.log('外层') }, click2(){ console.log('中间') }, click3(){ console.log('内层') } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
在点击内层后，输出为冒泡阶段，即内层->外层—>外层
3.3、如果需要监听捕获阶段的事件,在Vue中使用capture事件修饰符来实现
演示：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>Documenttitle> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <div id="d1" @click.capture="click1" style="border: solid red 1px;"> 外层 <div id="d2" @click.capture="click2" style="border: solid blue 1px;"> 中间 <div id="d3" @click.capture="click3" style="border: solid green 1px;"> 内层 div> div> div> div> <script> const obj={ methods:{ click1(){ console.log('外层') }, click2(){ console.log('中间') }, click3(){ console.log('内层') } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
在点击内层后，输出为事件捕获阶段，即外层->中层->内层
3.4、阻止事件的传递：stop
演示：
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>Documenttitle> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <div id="d1" @click.stop="click1" style="border: solid red 1px;"> 外层 <div id="d2" @click.stop="click2" style="border: solid blue 1px;"> 中间 <div id="d3" @click.stop="click3" style="border: solid green 1px;"> 内层 div> div> div> div> <script> const obj={ methods:{ click1(){ console.log('外层') }, click2(){ console.log('中间') }, click3(){ console.log('内层') } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
3.5、只触发一次事件：once
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>Documenttitle> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <div id="d1" @click.once="click1" style="border: solid red 1px;"> 外层 <div id="d2" @click.once="click2" style="border: solid blue 1px;"> 中间 <div id="d3" @click.once="click3" style="border: solid green 1px;"> 内层 div> div> div> div> <script> const obj={ methods:{ click1(){ console.log('外层') }, click2(){ console.log('中间') }, click3(){ console.log('内层') } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
3.6、禁止默认事件：prevent
<!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>Document</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <a href="http://www.baidu.com" @click.prevent="myclick">百度</a> </div> <script> const obj={ data(){ methods:{ myclick:{ console.log('点击成功') } } } } Vue.createApp('obj').mount('#app') </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
点击后不会跳转
-
相关阅读:
Redis中SDS简单动态字符串
python如何获取时间和格式化时间和日期 ？
MySQL基础
【Linux服务端搭建及使用】
java毕业生设计医院住院综合服务管理系统计算机源码+系统+mysql+调试部署+lw
概率论笔记(条件、联合、全概率、贝叶斯)
大数据软件项目的应用行业
基于鲸鱼算法优化的lssvm回归预测-附代码
C++ shutdown 使用方法 （坑人必备）
2023年软考什么时候报名，报名有什么条件？
- 原文地址：https://blog.csdn.net/thwr1881/article/details/126147861
