网站开发相关期刊,集团高端网站建设,网站不备案影响收录吗,中华衣柜网指令的修饰符
参考文献#xff1a; Vue的快速上手 Vue指令上 Vue指令下 Vue指令的综合案例 文章目录 指令的修饰符指令修饰符 结语 博客主页: He guolin-CSDN博客 关注我一起学习#xff0c;一起进步#xff0c;一起探索编程的无限可能吧#xff01;让我们一起努力…指令的修饰符
参考文献 Vue的快速上手 Vue指令上 Vue指令下 Vue指令的综合案例 文章目录 指令的修饰符指令修饰符 结语 博客主页: He guolin-CSDN博客 关注我一起学习一起进步一起探索编程的无限可能吧让我们一起努力一起成长 嗨收到一张超美的图 愿你每天都能顺心 注在看本文章前优先把参考文献看完
指令修饰符
通过 “.” 指明一些指令 后缀不同后缀封装了不同的处理操作 - 简化代码。 例如 ① 按键修饰符-键盘回车监听
keyup.enter
② v-model修饰符
v-model.trim-去除首尾空格v-model.number-转数字
③事件修饰符
事件名.stop-阻止冒泡事件名.prevent-阻止默认行为
我们以第一个键盘回车监听事件为例子。 我们在上一篇文章写了一个记事本的案例记事本是点击添加任务按钮才能添加任务这次我们加一个按回车键也能添加任务那么代码需要修改的地方为
//注add的这个方法是上一篇文章写的添加任务的一个方法
input typetext placeholder请输入任务 v-modeltodoName keyup.enteradd这样按下我们的回车键也可以添加任务。
那么我们来看下它的原理是什么。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph3keyup.enter - 监听键盘回车事件/h3input typetext v-modelusername keyup.enterfn/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el:#app,data:{username:,},methods:{fn(){console.log(键盘回车时触发,this.username);}}})/script
/body
/html这个时候只有当我门点击回车时才会在控制台打印
倘若我们将.enter去掉
input typetext v-modelusername keyupfn我们不需要按下回车键,只要一输就会在控制台自动打印。
如果我们要回车时才触发就要找到对应事件的标识符 我们队我们的方法fn稍作修改加上我们的事件对象e
fn(e){console.log(e);console.log(键盘回车时触发, this.username);
}当我们点击1的时候它会有个key值为1。
当我们按回车键时它的key值就是enter。
所以我们只要在fn方法里加上一个对key值的判断就能实现我们只有输入Enter时才打印这一事件
fn(e){if(e.key Enter){console.log(键盘回车时触发, this.username); }
}所以在keyup后面加上一个.enter就相当于外层加了一个判断将它封装好了所以修饰符就是在我们使用的时候帮助我们进行了一些小的封装来帮我们简化代码。
其他更多的指令修饰符也可以在接下来写代码的过程中一步步去尝试。
结语
本次分享就到这里了感谢小伙伴的浏览如果有什么建议欢迎在评论区留言如果给小伙伴们带来了一些收获请留下你的小赞你的点赞和关注将会成为博主分享每日学习的动力。
