zoukankan      html  css  js  c++  java
  • 使用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
                    });
                }
            }
        }
    });
  • 相关阅读:
    期末考试结束啦!!!
    【sdut2878】Circle
    【HDU4035】Maze
    【ZOJ3329】One Person Game
    【POJ2151】Check the difficulty of problems
    【CodeForces148D】Bag of mice
    【POJ2096】Collecting Bugs
    【HDU3853】LOOPS
    【HDU4405】Aeroplane_chess
    「Luogu P5826 【模板】子序列自动机」
  • 原文地址:https://www.cnblogs.com/luowenshuai/p/9362174.html
Copyright © 2011-2022 走看看