Vue event.target.value( ) Get the value of the current text box (triggered by carriage return or click)

Vue event.target.value( ) Get the value of the current text box (when triggered by an event)

Scenario description: Suppose there is currently a text box, when I enter content, press Enter or click a button,

                 We bind an event on this input or this button, and execute the corresponding methods after the event is triggered

                 How to get the value in the text box in the function in methods?

               

On the page of the above example, we can enter text in the input box, then press Enter or click to add our task, the following is the page part;

We bind the enter trigger event to the input, that is to say, as long as the enter key is used, the following function will be executed. This is the first way;

We add another button, then bind the click event, and click to trigger the add function behind;

<!-- start adding tasks section -->

< section id = "add-work" >

< h3 >Add new task</ h3 >

< input

type = "text"

placeholder = "Example: hold a work meeting at 3:00 pm;"

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