点击查看上一篇文章👇

从零开始学Vue3——(一)入门/TeAmo__/article/details/123119271?spm=1001..3001.5501

前言

一、事件修饰符

二、按键修饰符

三、系统修饰符

四、鼠标按钮修饰符

五、表单

文本与多行文本

复选框checkbox

单选框radio

选择框select

六、表单修饰符

总结

前言

这节主要学习的是修饰符，可以使事件的声明更方便

一、事件修饰符

Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

修饰符可连用

.stop 阻止事件冒泡

.prevent 阻止默认事件

.capture 捕获

.self 自身元素触发

.once 执行一次

.passive 滚动立即触发，不等待滚动完成（移动端性能提升）

实例：

<div id="app"><button type="button" @click="say">say 正常点击事件</button><br><button type="button" @click.once="say">once 只能触发一次</button><br><div class="box" @click="say"><a href="" @click="say">a 弹出两次并跳转</a><br><a href="" @click.prevent="say">prevent 弹出两次不跳转</a><br><a href="" @click.prevent.stop="say">prevent+stop 弹出一次不跳转</a><br></div></div>

Vue.createApp({methods: {say() {alert("say!");}}}).mount("#app");

二、按键修饰符

监听键盘事件时，我们经常需要检查特定的按键。可以使用按键修饰符

Vue 为最常用的键提供了别名

.enter 回车

.tab 制表

.delete “删除”和“退格”键

.esc 取消

.space空格

.up 上

.down 下

.left 左

.right 右

实例：

<div id="app"><input type="text" @keyup.enter="list.unshift(temp1);temp1=''" v-model="temp1" placeholder="回车确定" /><br><input type="text" @keyup="up" v-model="temp2" placeholder="回车确定" /><p v-for="(item,index) in list">{{item}}</p></div>

Vue.createApp({data() {return {list: ["vue"],temp1: "",temp2: "",}}},methods: {up(e) {if (e.keyCode === 13) {this.list.unshift(this.temp2);this.temp2 = "";}}}}).mount("#app");

运行结果：

两个输入框实现效果相同，使用按键修饰符，无需再判断更方便

​

三、系统修饰符

按下相应按键时才触发键盘事件的监听器。

.enter 回车

.ctrl

.alt

.shift

.meta (⌘或Windows 图标键 ⊞)

.exact 精确

四、鼠标按钮修饰符

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

.left

.right

.middle

五、表单

文本与多行文本

<div id="app"><input type="text" v-model="msg1"/><p>{{msg1}}</p><textarea rows="" cols="" v-model="msg2"></textarea><p style="white-space: pre-line;">{{msg2}}</p></div>

Vue.createApp({data() {return {msg1: "",msg2: ""}}}).mount("#app");

运行结果：

ps：p标签的white-space: pre-line;属性是为了展示textarea的换行。

​

复选框checkbox

实例：单个复选框与多个复选框，与value结合可以获取到选中项的value

<div id="app"><label><input type="checkbox" v-model="check" />同意用户协议</label><p><button type="button" :disabled="!check">注册</button></p><p>{{check}}</p><p>爱好</p><label><input type="checkbox" value="唱歌" v-model="fav" />唱歌</label><label><input type="checkbox" value="跳舞" v-model="fav" />跳舞</label><label><input type="checkbox" value="读书" v-model="fav" />读书</label><label><input type="checkbox" value="游泳" v-model="fav" />游泳</label><p>{{fav}}</p></div>

Vue.createApp({data() {return {check: false,fav: [],}}}).mount("#app");

运行结果：

​

单选框radio

实例：

<div id="app"><label><input type="radio" name="group" value="1" v-model="gender" />男</label><label><input type="radio" name="group" value="2" v-model="gender" />女</label><label><input type="radio" name="group" value="3" v-model="gender" />保密</label><p>{{gender}}</p></div>

Vue.createApp({data() {return {gender: 3,}}}).mount("#app");

运行结果：

​

选择框select

实例：

<div id="app"><p>学历</p><select v-model="level"><option value="" disabled="disabled">请选择</option><option value="小学">小学</option><option value="初中">初中</option><option value="高中">高中</option><option value="高中">大学</option></select><p>{{level}}</p></div>

Vue.createApp({data() {return {level: '',}}}).mount("#app");

运行结果：

​

六、表单修饰符

.lazy 懒加载；change时更新而非input时更新

.number 将用户输入的值转为数字类型

.trim 过滤首尾空白

实例：

<div id="app"><p>数字：</p><input type="text" v-model.number="num" /><p>{{num}}</p><p>懒加载：</p><input type="text" v-model.lazy="lazy" /><p>{{lazy}}</p><p>去空格：</p><input type="text" v-model.trim="trim" /><p>{{trim}}</p></div>

Vue.createApp({data() {return {num: "",lazy:"",trim:"",}}}).mount("#app");

运行结果：

​

点个赞吧👍