vue2.0实现过滤

vue1.0和vue2.0差别还是挺多的，之前的vue1.0还有过滤器功能，到了2.0过滤器只能通过自己编写。以下是写的一个小demo：

HTML

<div id="app">
　　<div>
　　　　过滤搜索<input type="text" value="" placeholder="搜 索" v-model="key">
　　</div>
　　<!-- 服务列表 -->
　　<ul class="service-list-con">
　　　　<li class="service-list" v-for="serviceList in fliterList">
　　　　　　<a :href="serviceList.serviceLink">
　　　　　　　　<span v-text="serviceList.serviceName"></span>
　　　　　　</a>
　　　　</li>
　　</ul>
</div>

 

JavaScript

var data = {
　　serviceList : [
　　　　{
　　　　　　serviceLink :"www.baidu.com",
　　　　　　serviceName : "我是百度"
　　　　},
　　　　{
　　　　　　serviceLink :"https://www.google.com.hk",
　　　　　　serviceName : "我是谷歌"
　　　　},
　　　　{
　　　　　　serviceLink :"https://www.taobao.com",
　　　　　　serviceName : "我是淘宝"
　　　　},
　　　　{
　　　　　　serviceLink :"https://www.jd.com",
　　　　　　serviceName : "我是京东"
　　　　}

　　],
　　key : "",
}

var vm = new Vue({
　　el : "#app",
　　data : data,
　　computed : {
　　　　fliterList : function(){
　　　　　　var key = this.key;
　　　　　　var serviceList = this.serviceList;
　　　　　　return serviceList.filter(function(serviceList) {
　　　　　　　　return serviceList.serviceName.indexOf(key) != -1;
　　　　　　});

　　　　}
　　}
})

 

实现功能