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

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

一般可以用作查询。

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

var str="Hello World!"

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

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

下面看具体的例子吧

 

       

           
       

       

           
• searchFor(articles,searchStr)">  //重点重点是这个
                 
                 

  {{a.title}}

  
             

       

  

  

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;

  }

}