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

于 2023-11-26 22:15:16 发布
阅读量826 收藏 6
点赞数 8
分类专栏： Vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67930426/article/details/134633668
版权
文章介绍了Vue中的keyup.enter事件如何在不点击按钮时通过键盘回车实现任务添加，以及v-model.trim的作用——去除用户输入前后多余的空格。通过两个情景展示了这两个特性在实际应用中的效果。
摘要由CSDN通过智能技术生成

目录

@keyup.enter

@v-model.trim

情景一：

情景二：

@keyup.enter

作用：监听键盘回车事件

上一篇内容： 记事本

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

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

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

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

按钮的功能

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

实现任务的添加

使用@keyup.enter之前

使用@keyup.enter后

按回车键

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

@v-model.trim

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

情景一：

在文本框输入aaa

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

vue插件安装教程：

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

情景二：

aaa前面多了几个空格

再去查看控制台

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

 

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

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

freedomSTUDENT
关注
  • 8
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue按键修饰符：@keyup.enter
YY的博客
11-21 6473
Vue按键修饰符：@keyup.enter
Vue回车键触发 使用 @keyup.enter 事件监听回车键。
最新发布
qq_45595648的博客
06-22 340
【代码】Vue回车键触发。
vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native
热门推荐
Kuroko's Development Notes
05-18 13万+
vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符： <input v-on:keyup.13="submit"> vue还非常贴心地给出了常用按键的别名，这样就不必去记keyCode ~ ~ 上面代码，还可以在这样写：   <input v-on:keyup.enter="submit"> <input @keyup.enter="submit...
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
hrbsfdxzhq01的博客
01-04 5718
vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符： <input v-on:keyup.13="submit"> vue还非常贴心地给出了常用按键的别名，这样就不必去记keyCode ~ ~ 上面代码，还可以在这样写： <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"&..
vue element-ui 绑定@keyup事件无效的解决方法
08-27
v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)" ></el-input> ``` 在上面的代码中，`@keyup.native`确保了`getGameList`函数会在...
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
10-15
本文将深入探讨`v-model`的三种修饰符：`.lazy`, `.number` 和 `.trim`，以及它们在实际应用中的用法。 1. **.lazy** 修饰符： 默认情况下，`v-model`会在每次输入时（即`input`事件触发时）更新数据。但使用`....
Vue.js 中的 v-model 指令及绑定表单元素的方法
10-17
- 在文本输入框上使用 `v-model` 可以实时同步输入框的值与 Vue 实例中的数据。例如： ```html <input type="text" v-model="content" placeholder="请输入"> 输入框：{{content}} ``` 这里的 `v-model` ...
vue实现404页面配置、自带的回车事件@keyup.enter
在写作的路上持续输出。
11-18 1175
vue实现404页面配置、自带的回车事件@keyup.enter
@keyup.enter事件
z786352260的博客
06-10 9435
今天碰到一个前端的问题搞了半天 当用@keyup.enter敲击enter回车之后直接提交表单, 如果加了el组件就要用 @keyup.enter.native , 但是当你只有一个输入框的时候 from元素上要加上 @submit.native.prevent 不加的话,当你按enter之后页面会刷新地址栏还会多一个"?", 当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 @submit.native.prevent。
vue实现给div绑定keyup的enter事件
10-15
主要介绍了vue实现给div绑定keyup的enter事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 绑定 keyup.enter 绑定回车键盘事件 enter键防止页面刷新
爱睡的虫虫
12-10 1683
关于vue中的@keyup.enter键盘事件无法生效的解决办法。
vue 回车触发聚焦 @keyup.enter.native
小冯的博客
09-21 5万+
vue登录界面输入用户名回车自动聚焦密码框 1.回车触发事件keyupClick： @keyup.enter.native="keyupClick";密码框里放: ref="mima" <van-field v-model="username" clearable type="tel" label="用户名" right-icon="questi...
Vue.js：按键修饰符keyup,keyup.enter,keyup.alt.enter的使用
万物皆可学
06-23 3万+
学习Vue.js第三天 键盘事件keyup <label>你所在城市：</label><input type="text" v-on:keyup="City"/> <label>你所在公司：</label><input type="text" v-on:keyup="Company"/> <!--City,Company...
@keyup.enter 回车表单提交事件
qq_36437172的博客
10-08 3806
当使用@keyup.enter 事件，敲击 enter 回车之后，直接提交表单。 当form 表单中，只有一个输入框时，添加 @keyup.enter.native 事件，在该输入框中按下回车后提交表单；如果希望阻止这一默认行为，可以在标签上添加 @submit.native.prevent 事件。 <el-form label-width="5px"> <el-form-item> <el-input placeholder="请输入手机号..
vue.js的键盘事件
贾世鑫的博客
02-02 9154
vue.js的键盘事件 @keyup.13 回车 @keyup.enter 回车 @keyup.left 左键 @keyup.right 右键 @keyup.up 上键 @keyup.down 下键 @keyup.delete 删除键 vue按键         window.onl
跟着技术胖学Vue2.0—第六课：v-model指令
哎呦喂iuv的博客
01-09 684
学习回顾 课程主要内容 1、掌握v-model文本框绑定及3个修饰符 2、掌握v-model文本域绑定 3、掌握v-model多选框绑定一个值和数组 4、掌握v-model单选框绑定 操作步骤 1、掌握v-model文本框绑定及3个修饰符 首先，在index.html中新建一个li，并在example里新建一个v-model.html用来存储我们的实例。 下面要开始实现v-model.html中的内容了。我们要实现的是，在前端页面中的文本框里的内容和p标签内显示的内容同步，如下： 上
@keyup.enter 首次回车无效问题
sunlihong123的博客
10-31 2741
@keyup.enter绑定在button上，需要点击一次，回车按键才响应。 原因是：keyup 事件绑定在按钮上面，如果焦点不在按钮上，就无法响应这个事件了。点击之后，焦点就在按钮上，所以这时按回车键才有效。 解决方法是：把 keyup 事件绑定在 document 上面。 未把 keyup 事件绑定在 document 上面。无效！！！ ...
<section id="todoapp"> <header class="header"> <h1><a href="table.html">小小记事本</a></h1> <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo"></input> </header> <section class="main"> <ul class="todo-list"> <li class="todo" v-for="(item,index) in list"> <div class="view"> <span class="index">{{ index+1 }}.</span> <label v-if="!item.editing">{{ item.content }}</label> <input v-else v-model="item.content" @keyup.enter="save(index)" @blur="save(index)" class="edit"> <button class="edit-button" @click="edit(index)" v-if="!item.editing">编辑</button> <button class="save-button" @click="save(index)" v-if="item.editing">保存</button> <button class="destroy" @click="remove(index)"></button> </div> </li> </ul> </section> <footer class="footer" v-show="list.length!==0"> <span class="todo-count" v-if="list.length!==0"> <strong>{{ list.length }}</strong> items left </span> <button v-show="list.length!==0" class="clear-completed" @click="clear"> Clear </button> </footer> </section>在这里面加入增、删的功能
05-24
要实现增删功能，需要在Vue实例中添加相应的方法，以下是一个简单的实现： ``` new Vue({ el: '#todoapp', data: { inputValue: '', list: [] }, methods: { add() { if (this.inputValue.trim() === '') {...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值