indexOf()的用法,引申出的vue的搜索

indexOf() 返回某个指定的字符在某个字符串中首次出现的位置。如果没有找到就返回-1；

一般可以用作查询。

indexOf() 方法对大小写敏感！所以之前你要把所有查询到内容变为小写。var str=str.trim().toLowerCase()

var str="Hello World!"

str.indexOf("Hello")   ---0

str.indexOf("world")   ---6

下面看具体的例子吧

 <div class="main">
       <div class="bar">
           <input type="text" v-model="searchStr" palceholder="搜索"/>
       </div>
       <ul>
            <li v-for="a in searchFor(articles,searchStr)">  //重点重点是这个
               <a :href="a.url" ><img :src="a.image"/></a>
               <p>{{a.title}}</p>
           </li>
       </ul>
   </div>  

data(){
        return{
            list:[],
            searchStr:"",
             articles: [
        
            {
                "title": "What You Need To Know About CSS Variables",
                "url": "http://tutorialzine.com/2016/03/what-you-need-to-know-about-css-variables/",
                "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/03/css-variables-100x100.jpg"
            },
            {
                "title": "Freebie: 4 Great Looking Pricing Tables",
                "url": "http://tutorialzine.com/2016/02/freebie-4-great-looking-pricing-tables/",
                "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/great-looking-pricing-tables-100x100.jpg"
            }]

   }

},

methods:{

   searchFor(value,searchStr) {

        var result=[];  //用result来存放查到的结果

         if(!searchStr){return value;}

       searchStr=searchStr.trim().toLowerCase();   //把查询的内容转为小写的

       result=value.filter(function(item){        //这里value是个数组,他也有filter方法的.item是value里面的。
               if(item.title.toLowerCase().indexOf(searchStr)!=-1){   \\如果搜索的内容在title标题里面有的话就返回那个项目
                   return item;
               }
           });

    return result;

  }

}