使用vue簡單實現：模糊查找

首先我要介紹兩個方法

一、ES5中數組操作方法：filter() 過濾數組也是一個常用的操作，它用於遍歷Array把某些元素過濾掉，然后把剩余的元素組成一個新數組返回（不改變原數組）。

例如：過濾奇數，保留偶數：

var arr = [1, 2, 3, 4, 5, 6];
var brr = arr.filter(function (value) {
    return value%2 == 0;  //遍歷數組，返回值為true保留並復制到新數組，false則過濾掉
});
console.log(brr);  //[2, 4, 6]

二、ES6中 includes( ) 方法：用來判斷一個 數組/字符串 是否包含一個指定的值，如果是返回 true，不是返回false。

var arr = [1, 2, 3];
var str = 'abcd';
console.log(arr.includes(2));//true
console.log(arr.includes(4));//false
console.log(str.includes('a'));//true
console.log(str.includes('e'));//false

簡單實現模糊查找：

首先引入vue.js文件：

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

html代碼：

<div id="box">
    <input type="text" v-model="keyword"/>
    <ul>
        <li v-for="value in fSearch">
            <p>{{value}}</p>
        </li>
    </ul>
</div>

js代碼：

var vm = new Vue({
    el : '#box',  //確定根元素
    data : {
        keyword : '',
        list : ['百度', '百度翻譯', '百度地圖', '百度網盤', '百度新聞']
    },
    computed : {  //設置計算屬性
        fSearch(){
            if(this.keyword){
                return this.list.filter((value)=>{  //過濾數組元素
                    return value.includes(this.keyword); //如果包含字符返回true
                });
            }
        }
    }
});