【Vue】@keyup.enter @v-model.trim的用法

目录

@keyup.enter

@v-model.trim

情景一:

情景二:


@keyup.enter

作用:监听键盘回车事件

上一篇内容: 记事本

https://blog.csdn.net/m0_67930426/article/details/134630834?spm=1001.2014.3001.5502

【Vue】@keyup.enter @v-model.trim的用法_第1张图片

这里有个添加任务的功能: 在文本框输入任务,然后点击添加按钮,实现添加功能

我们平常在使用电脑的时候,比如上百度搜索,在文本框内输入你想要搜索的

内容,这时你点回车就能触发网页加载进入相应的页面,这个回车就执行了搜索这个

按钮的功能

这里的@keyup.enter讲的就是这一个概念,我们不点添加按钮,通过enter回车键就能

实现任务的添加

使用@keyup.enter之前

【Vue】@keyup.enter @v-model.trim的用法_第2张图片

使用@keyup.enter

【Vue】@keyup.enter @v-model.trim的用法_第3张图片

【Vue】@keyup.enter @v-model.trim的用法_第4张图片

按回车键

【Vue】@keyup.enter @v-model.trim的用法_第5张图片

然后添加了跑步这一个任务

@v-model.trim

作用: 将用户输入的前后的空格去掉

情景一:

【Vue】@keyup.enter @v-model.trim的用法_第6张图片

在文本框输入aaa

然后打开控制台,打开浏览器安装的vue插件

vue插件安装教程:

https://blog.csdn.net/m0_67930426/article/details/134598104?spm=1001.2014.3001.5502

【Vue】@keyup.enter @v-model.trim的用法_第7张图片

情景二:

【Vue】@keyup.enter @v-model.trim的用法_第8张图片

aaa前面多了几个空格

再去查看控制台

【Vue】@keyup.enter @v-model.trim的用法_第9张图片

通过情景一和情景二我们在使用@v-model.trim看看有什么效果

 【Vue】@keyup.enter @v-model.trim的用法_第10张图片

【Vue】@keyup.enter @v-model.trim的用法_第11张图片

这里的aaaaa前多了几个空格,再去查看控制台

【Vue】@keyup.enter @v-model.trim的用法_第12张图片

对比情景二,v-model.trim的作用是将用户输入的前后的空格去掉

你可能感兴趣的:(Vue,vue.js,前端)