Vue实现模糊查询




输入框通过v-model指令绑定到searchTerm属性,这样当输入框的值发生变化时,searchTerm属性也会随之更新。

computed计算属性中,我们定义了filteredData计算属性来根据searchTermdata进行过滤。如果searchTerm为空,即没有进行模糊查询,则直接返回原始的data数组;否则,使用filter()方法对每个数据项进行模糊匹配。

在模板中,我们使用v-for指令在列表中渲染过滤后的数据,并为每个列表项设置一个唯一的key属性。

当用户输入关键词时,searchTerm属性会更新,并触发filteredData计算属性的重新计算,从而动态更新列表的内容。

你可能感兴趣的:(vue.js,javascript,前端)