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

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

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

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

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


               


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

我们给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获取 ;

猜你喜欢

转载自blog.csdn.net/cvper/article/details/80025680
今日推荐