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

<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
                }
            },
       },
  };

猜你喜欢

转载自blog.csdn.net/wang___k/article/details/79020497
今日推荐