Vue event.target.value( ) 获取当前文本框的值（回车或者点击触发）

素颜马尾好姑娘i 2022-05-26 00:09 637阅读 0赞

Vue event.target.value( ) 获取当前文本框的值（由事件触发时）

情景描述：假设当前有一个文本框，当我输入内容之后，回车或者点击一个按钮，

我们在这个input 上或者这个按钮上绑定事件，触发事件之后执行相应的methods中

的处理函数，在methods中的函数中是如何获取文本框中的值的呢？

![70][]

上面一个示例的页面，我们可以在输入框中输入文本，然后回车或者点击添加我们的任务，下面是页面部分；

我们给input 绑定了enter的触发事件，也就是说只要使用enter键，那么就会执行后面的函数，这是第一种方式；

我们又增加了一个按钮，然后绑定点击事件，点击触发后面的添加函数；

< section id= "add-work">

< h3>增加新任务</ h3>

< input

type= "text"

placeholder= "例如:下午三点召开工作会议 ;"

v-on:keyup. enter= "addThingEnter"

>

< a href= "\#" v-on:click= "addThingClick">立即添加</ a>

</ section>

当点击之后，我们看看事件处理部分：

new Vue(\{

el: "\#con",

data:\{

info:list

\},

methods:\{

addThingEnter( *event*)\{

console.log(event.target.value)

\},

addThingClick()\{

console.log( this.$el. querySelector( "input").value)

\}

\}

\});

通过 enter 事件添加的文本，我们直接通过  event.target.value 直接获取；

但是点击事件就不可以了，我这里使用querySelector()的方式获取值；

（ 如果你还不了上面有的代码和参数，请自行查阅文档；

注意：vue是数据驱动的，所以实现功能的时候最好不要操作DOM

上面的方式只是说明一下这种获取方式，不是最好的用法 ）

补充：上次说的这个不是最好的方式，这里提一下替代方式，

在input框中绑定  v-model =abc

在数据中添加    data:\{  abc="" \}   设置abc为空

在methods中，我们就可以获取this.abc 的值，而不是通过DOM获取 ;

[70]: /images/20220526/cd8c849e593a450690bc1bfb217bedcf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，637人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 的点击事件怎么获取当前点击的元素

// 首先 vue的点击事件是用 @click = “clickfun()” 属性在html中绑定的, // 在点击的函数中添加$event 参数就可以

缺乏、安全感/ 2023年06月15日 09:54/ 0 赞/ 64 阅读

相关 JS_vue js获取鼠标点击元素对象，vue js点击获取当前元素内容

js点击获取当前元素内容 .html <div onclick="getEvent(event)">click</div> .js function

朱雀/ 2023年01月19日 03:16/ 0 赞/ 363 阅读

相关 vue 自动触发点击事件

需要，点击左边的菜单，顶部菜单相应改变，但是都需要点击事件，页面进来时，默认触发点击事件方法一，vue自定义指令 directives:{

Dear 丶/ 2023年01月12日 14:56/ 0 赞/ 284 阅读

相关 Vue实现自动触发点击事件

directives:{ trigger:{ inserted(el, binging){ console.l

灰太狼/ 2023年01月01日 01:53/ 0 赞/ 366 阅读

相关 js点击获取当前li标签的index值

在之前面试的时候，笔记的环节总是碰到用原生js弹出当前点击li的indx值，今天没事就写一下，留作记忆！下面是html机构，为了省事我就不加id class了。

以你之姓@/ 2022年07月17日 00:17/ 0 赞/ 318 阅读

相关 Vue event.target.value( ) 获取当前文本框的值（回车或者点击触发）

Vue event.target.value( ) 获取当前文本框的值（由事件触发时）情景描述：假设当前有一个文本框，当我输入内容之后，回车或者点击一个按钮，

素颜马尾好姑娘i/ 2022年05月26日 00:09/ 0 赞/ 638 阅读

相关 vue点击事件获取当前元素对象

Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!',

女爷i/ 2022年01月31日 00:37/ 0 赞/ 546 阅读

相关 vue 的点击事件怎么获取当前点击的元素

首先 vue的点击事件是用 @click = “clickfun()” 属性在html中绑定的, 在点击的函数中添加$event 参数就可以比

￡神魔★判官ぃ/ 2021年11月02日 07:44/ 0 赞/ 772 阅读

相关解决layui点击按钮后,按回车再次触发的问题

在测试项目bug时发现如题所诉bug，好家伙，点击新建按钮后在狂按回车，直接给我弹出一堆窗口，屏幕都给整黑了。。。经过一番查阅文档及调试，找到如下解决方法：方法一：

不念不忘少年蓝@/ 2021年09月24日 17:30/ 0 赞/ 1154 阅读

相关点击图片获取当前色值

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta n

ゝ一世哀愁。/ 2021年09月01日 12:44/ 0 赞/ 521 阅读