Vue中@keyup.enter @v-model.trim的用法小结
更新时间：2023年12月01日 09:26:57 作者：freedomSTUDENT
这篇文章主要介绍了Vue中@keyup.enter @v-model.trim的用法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
@keyup.enter
作用：监听键盘回车事件
上一篇内容： 记事本
https://www.jb51.net/article/163968.htm
这里有个添加任务的功能： 在文本框输入任务，然后点击添加按钮，实现添加功能
我们平常在使用电脑的时候，比如上百度搜索，在文本框内输入你想要搜索的
内容，这时你点回车就能触发网页加载进入相应的页面，这个回车就执行了搜索这个
按钮的功能
这里的@keyup.enter讲的就是这一个概念，我们不点添加按钮，通过enter回车键就能
实现任务的添加
使用@keyup.enter之前
使用@keyup.enter后
按回车键
然后添加了跑步这一个任务
@v-model.trim
作用： 将用户输入的前后的空格去掉
情景一：
在文本框输入aaa
然后打开控制台，打开浏览器安装的vue插件
vue插件安装教程：
https://www.jb51.net/article/161101.htm
情景二：
aaa前面多了几个空格
再去查看控制台
通过情景一和情景二我们在使用@v-model.trim看看有什么效果
这里的aaaaa前多了几个空格，再去查看控制台
对比情景二，v-model.trim的作用是将用户输入的前后的空格去掉
到此这篇关于Vue中@keyup.enter @v-model.trim的用法的文章就介绍到这了,更多相关vue @keyup.enter @v-model.trim内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
这篇文章主要介绍了解决VUE 在IE下出现ReferenceError: Promise未定义的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最近开发了一个功能,页面首页会加载大量的图片,初次进入页面时,会导致页面性能下降,于是乎,我改进了这个功能,可以让所有图片自动懒加载,文中有详细的代码示例,需要的朋友可以参考下2023-09-09
这篇文章主要为大家介绍了Vue在css中图片路径问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
Vue.js目前已经更新到2.x，功能和语法上有一定升级和修改，本文首先介绍基础内容。感兴趣的朋友一起看看吧2017-10-10
本文主要介绍了Vue3中简单实现动态添加路由，，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
贪吃蛇作为一个经典的小游戏，是很多人儿时的记忆，当时的掌机、诺基亚手机里面都有它的身影。本文将用Vue3 Canvas来复刻一下这款游戏，感兴趣的可以了解一下2022-07-07
解决ElementUI组件中el-upload上传图片不显示问题
这篇文章主要介绍了解决ElementUI组件中el-upload上传图片不显示问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue中$on和$emit的实现原理分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
vue中this.$router.go(-1)失效(路由改变了，界面未刷新)
本文主要介绍了vue中this.$router.go(-1)失效(路由改变了,界面未刷新),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
这篇文章主要为大家介绍了解决安装arco-design-pro-vue失败的问题方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
最新评论