vue监听input标签的value值

最新推荐文章于 2024-03-05 19:18:16 发布

原创最新推荐文章于 2024-03-05 19:18:16 发布 · 1w 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍如何在Vue项目中实现输入框实时监听并进行模糊搜索功能。通过使用@input事件，可以实现在用户输入的同时调用搜索方法，提高用户体验。文章提供了三种获取输入框值的方法。

由于项目需要做实时搜查询数据,所以需要监听input标签的value,这里使用的前端框架vue

<input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/>

这里的重点是：@input="search($event)"，表示当文本框有内容输入时,则调用search方法

/*模糊搜索*/
search: function (event) {
    //方法一：直接通过event.data可以获得文本内容
    if(event.data!=null){
        this.materialName = event.data;        
    }
    //方法二：获取DOM对象取value值
    this.materialName = event.currentTarget.value;
    //方法三：通过js获取
    this.materialName = document.getElementById("materialSearch").value;
}