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

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

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

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

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

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

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

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

增加新任务

立即添加

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

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获取 ;