Vue 对数组进行搜索查询

最新推荐文章于 2024-07-30 16:12:41 发布

海涛高软

最新推荐文章于 2024-07-30 16:12:41 发布

阅读量9.6k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_15267341/article/details/100175897

版权

VUE 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <input type="text" v-model="shuru"/> <br/>
    <ul>
        <li v-for="(p,index) in filterpersons" :key="index">
            {{p.namee}}----{{p.age}}
        </li>
    </ul>
</div>
</body>
<script type="text/javascript">

    var vue = new Vue({
        el: "#app",
        data: {
            persons: [{namee: "xuhaitao", age: 33}, {namee: "hunk", age: 45}, {namee: "xuhaihuan", age: 30}],
            xuhao: ["A", "B", "C", "D"],
            shuru: 'x'

        },
        computed: {
            filterpersons() {
                const{persons,shuru}=this;

                return persons.filter(item=>{return item.namee.indexOf(shuru.trim())>=0})

                //另一种写法 ，匿名函数
                /*
                return this.persons.filter(function (item) {
                    return item.namee.indexOf(shuru)>=0;
                })
                */
            }
        }

    });

</script>

</html>

实现效果如下：

FR：徐海涛（hunk Xu)
QQ技术交流群：386476712

海涛高软

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue 对数组进行搜索查询

<!DOCTYPE html><html lang="en"><head> <script src="js/vue.js"></script> <style> </style></head><body><div id="app"> &...
复制链接

扫一扫

专栏目录