indexOf()的用法,引申出的vue的搜索
indexOf() 返回某个指定的字符在某个字符串中首次出现的位置。如果没有找到就返回-1;一般可以用作查询。indexOf() 方法对大小写敏感!所以之前你要把所有查询到内容变为小写。var str=str.trim().toLowerCase()var str="Hello World!"str.indexOf("Hello") ---0str.inde
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;
}
}
更多推荐
所有评论(0)