本文深入探讨了Vue框架中的事件处理，包括事件修饰符的使用，如.stop和.prevent，以及如何链式调用。同时，详细阐述了动态绑定类与样式的技巧，如:v-bind:class和:v-bind:style的简写形式，并通过实例演示了其用法。最后，介绍了表单的处理，如v-model修饰符.trim、.number和.lazy，以提升用户体验和性能。
文章目录
前言
事件修饰符:
.stop 阻止冒泡
.prevent 阻止HTML标签的默认事件和行为
事件修饰符可以链式调用
@keyup.ctrl.shift.65=“screenCaptrue”
当我们在做VUE开发,凡是涉及到事件的功能,都有非常好的事件修饰符可以帮助我们实现。
提示：以下是本篇文章正文内容，下面案例可供参考
一、事件详解
v-on:事件名称=“事件处理器fn(‘1’,$event,‘2’)”
简写：
@事件名称=“事件处理器fn(‘1’,$event,‘2’)”
二、动态样式
1.v-bind:class 简写 ：class
:class=" "是一组类名
代码如下（示例）：
<div :class="color" class="color">hello vue</div>
<div :class="[isCol?'red':'green',font]" class="color">hello vue</div>
<div :class="{'red':isCol,'font-class':!isCol}" class="color">hello vue</div>
2.v-bind:style 简写 ：style
:style=" "是一组"css属性-css属性值"的键值对
代码如下（示例）：
<div :style="[aStyle,bStyle]">2006</div>
<div :style="{'font-size':size+'px','color':col}">2006</div>
做一个小demo
以上效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.color{
font-size: 20px;
}
.red{
color: red;
}
.green{
color: green;
}
.font-class{
font-size: 40px;
}
.tab{
line-height: 80px;
font-size: 20px;
text-align: center;
display: flex;
}
.tab span{
flex: 1;
border: 1px solid #ccc;
cursor: pointer;
}
.tab span.on{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="tab">
<!--第一种方式-->
<span :class="{'on': tabIdx==0}" @click="tabClick(0)">首页</span>
<span :class="{'on': tabIdx==1}" @click="tabClick(1)">发现</span>
<span :class="{'on': tabIdx==2}" @click="tabClick(2)">我的</span>
<!--第二种方式-->
<!--<span :class="[tabIdx==0?'on':'']" @click="tabClick(0)">首页</span>
<span :class="[tabIdx==1?'on':'']" @click="tabClick(1)">发现</span>
<span :class="[tabIdx==2?'on':'']" @click="tabClick(2)">我的</span>-->
<!--第三种方式-->
<!--<span :style="{'color' :tabIdx==0?'red':'black'}" @click="tabClick(0)">首页</span>
<span :style="{'color' :tabIdx==1?'red':'black'}" @click="tabClick(1)">发现</span>
<span :style="{'color' :tabIdx==2?'red':'black'}" @click="tabClick(2)">我的</span>-->
<!--第四种方式-->
<!--<span :style="[tabIdx==0?colA:colB]" @click="tabClick(0)">首页</span>
<span :style="[tabIdx==1?colA:colB]" @click="tabClick(1)">发现</span>
<span :style="[tabIdx==2?colA:colB]" @click="tabClick(2)">我的</span>-->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
color:"abc",
isCol:true,
font:"font-class",
aStyle:{
"color":"pink",
"font-size":"100px"
},
bStyle:{
"border":"1px solid #ccc",
"padding":"20px"
},
colA:{
"color":"red"
},
colB:{
"color":"black"
},
size:200,
col:"blue",
tabIdx:0
},
methods:{
tabClick(idx){
this.tabIdx = idx
}
}
})
</script>
</body>
</html>
三、表单详解
1.表单有哪些?input、textarea、select
语法：v-model=“username”
表单有三个修饰符
.trim 把文本类表单绑定的值,去除前后的空字符串
.number 可把文本类数字字符,自动转化成数值类型
.lazy 这个修饰符的作用,当表单失去焦点时,才同步更新data中被绑定的变量,以达到性能优化的目的
代码如下（示例）：
<!--.trim的使用-->
<input type="" v-model.trim="username" />
<hr />
<!--.number的使用-->
<input type="" v-model.number="num" />
<input type="" v-model.number="price" />
<button type="button" @click="calc">总价</button>
<hr />
<!--.lazy的使用-->
<input type="" v-model.lazy="desc" />
<hr />
做一个小demo
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<div id="app">
<!--多行文本框-->
<textarea rows="3" cols="30" v-model="info"></textarea>
<hr />
<!--单选按钮组，至少两个以上-->
<input type="radio" value="1" v-model="gender" /><label>男</label>
<input type="radio" value="2" v-model="gender" /><label>女</label>
<br />
<div>
<span v-for="item in gradeArr">
<input type="radio" :value="item.id" v-model.number="garde" />
<label v-text="item.label"></label>
</span>
</div>
<hr />
<!--可单选的复选框-->
<div>
<input type="checkbox" v-model="agree"/>
<span>同意此协议</span>
</div>
<hr />
<!--可多选的复选框-->
<div>
<span v-for="item in favArr">
<input type="checkbox" :value="item.id" v-model="fav" />
<label v-text="item.label"></label>
</span>
</div>
<hr />
<!--只能单选的下拉框-->
<h3>请选择你的学历：</h3>
<select v-model="grade2">
<option v-for="item in gradeArr" :value="item.id" v-text="item.label"></option>
</select>
<hr />
<!--可以多选的下拉框-->
<h3>请选择你的爱好：</h3>
<select multiple v-model="fav2">
<option v-for="item in favArr" :value="item.id" v-text="item.label"></option>
</select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
username:"",
num:0,
price:0,
desc:"",
info:"",
gender:"1",
gradeArr:[
{id:1,label:'博士'},
{id:2,label:'硕士'},
{id:3,label:'本科'},
{id:4,label:'大专'},
{id:5,label:'高中'}
],
garde:3,
agree:true,
favArr:[
{id:1,label:'看电影'},
{id:2,label:'跑步'},
{id:3,label:'喝酒'},
{id:4,label:'吃饭'},
{id:5,label:'唱歌'},
{id:6,label:'游泳'}
],
fav:[], //可多选的复选框，其v-model绑定的值必须是数组
grade2:3,
fav2:[1,2]
}
})
</script>
</body>
</html>
514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
