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中 根据判断条件添加一个或多个style及class的写法小结

    vue中 根据判断条件添加一个或多个style及class的写法小结

    这篇文章主要介绍了vue中 根据判断条件添加一个或多个style及class的写法,文中给大家补充介绍了关于vue里:class的使用结合自己的实现给大家讲解,需要的朋友可以参考下
    2023-03-03
  • web前端vue之CSS过渡效果示例

    web前端vue之CSS过渡效果示例

    本篇文章主要介绍了web前端vue之CSS过渡效果示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 浅谈针对Vue相同路由不同参数的刷新问题

    浅谈针对Vue相同路由不同参数的刷新问题

    这篇文章主要介绍了浅谈针对Vue相同路由不同参数的刷新问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue中的计算属性介绍

    Vue中的计算属性介绍

    这篇文章主要介绍了Vue中的计算属性,模板内的表达式,用于简单运算,但是模板中放入太多的逻辑会让模板过重且难以维护,更多具体内容一起进入下面文章学习吧,需要的朋友也可以参考一下
    2021-12-12
  • 在vue项目如何使用base64加密

    在vue项目如何使用base64加密

    这篇文章主要介绍了在vue项目如何使用base64加密,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue3 hook自动导入原理解析

    vue3 hook自动导入原理解析

    这篇文章主要介绍了vue3 hook自动导入的原理,介绍了API的自动导入及组件的自动导入,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue两种组件类型:递归组件和动态组件的用法

    Vue两种组件类型:递归组件和动态组件的用法

    这篇文章主要介绍了Vue两种组件类型:递归组件和动态组件的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue利用Blob下载原生二进制数组文件

    Vue利用Blob下载原生二进制数组文件

    这篇文章主要为大家详细介绍了Vue利用Blob下载原生二进制数组文件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Vue3 JSX解释器的实现

    Vue3 JSX解释器的实现

    本文主要介绍了Vue3 JSX解释器的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • Vue之mixin全局的用法详解

    Vue之mixin全局的用法详解

    这篇文章主要介绍了Vue之mixin全局的用法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论