Vue2.0 搜索,模糊查询--菜鸟--如有错误谢谢指教

最新推荐文章于 2024-09-03 02:01:58 发布

Wang___K

最新推荐文章于 2024-09-03 02:01:58 发布

阅读量3.1k

点赞数

文章标签： VUE javascript 自定义过滤器

本文链接：https://blog.csdn.net/Wang___K/article/details/79020497

版权

<template>
   <div> 	
  <input v-model="filterText"/>
       <ul>
           <li v-for="item in products">--//in 遍历出数组
               <span >{{myfilter(item.name)}}</span>--//双花括号绑定数据
           </li>
       </ul>
   </div>
</template>

 export default {
  	name: 'home',
    data() {
      return {
      	products: [
		  {name: '香蕉',price: 15,category: "水果"}, 
		  {name: '菠萝',price: 65,category: "水果"}, 
		  {name: '椅子',price: 15,category: "生活"}, 
		  {name: '桌子',price: 25,category: "生活"}
		 ],
		filterText:"",
             };
        },   
   methods:{   --//方法
            myfilter(value){
                if(value.indexOf(this.filterText)>-1){  --//js的语法
                    return value
                }
            },
       },
  };