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中 根据判断条件添加一个或多个style及class的写法小结
这篇文章主要介绍了vue中 根据判断条件添加一个或多个style及class的写法,文中给大家补充介绍了关于vue里:class的使用结合自己的实现给大家讲解,需要的朋友可以参考下2023-03-03


最新评论