vue-计算属性-模糊查询

最新推荐文章于 2022-08-12 21:11:12 发布

@Tiramisu

最新推荐文章于 2022-08-12 21:11:12 发布

阅读量253

点赞数 1

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46606159/article/details/105017659

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>

</head>
<body>
    <div id="box">
        <input type="text" v-model="mytext" />
        <!-- <input type="text" @input="handleInput" /> -->

        <ul>
            <!--计算属性可写在指令里-->
            <li v-for="data in getMyDatalist">
                {{data}}
            </li>
        </ul>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        //["aaa","bbb","ccc","ddd","add","cee","eee"]        
        var vm = new Vue({
            el: "#box",
            data: {
                mytext: '',
                datalist: ["aaa", "bbb", "ccc", "ddd", "add", "cee", "eee"]
            },
            computed: {
                getMyDatalist() {
                    //过滤
                    //item.indexOf(this.mytext)永远大于-1
                    //不影响原始数组
                    return this.datalist.filter(item => item.indexOf(this.mytext) > -1)
                }
            },
        })
        var arr = [1, 2, 3, 4, 5]
        var newlist = arr.filter(item => item >= 3)
        console.log(newlist)
    </script>
</body>
</html>