Vue 搜索和排序

最新推荐文章于 2023-07-11 11:29:50 发布

海涛高软

最新推荐文章于 2023-07-11 11:29:50 发布

阅读量197

点赞数

分类专栏： VUE

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

版权

VUE 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

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

    </style>
</head>
<body>
<div id="app">
    filter by namee : <input type="text" v-model="shuru"/> <br/>
    <ul>
        <li v-for="(p,index) in filterpersons" :key="index">
            {{p.namee}}----{{p.age}}
        </li>
    </ul>
    <button @click="paixu(1)">up</button>
    <button @click="paixu(2)">down</button>
    <button @click="paixu(0)">default</button>
</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: '',
            zhi: 0
        },
        computed: {
            filterpersons() {
                var $this = this;  // 相当于这种写法 const {persons,shuru}=this;
                var filterP = this.persons.filter(function (item) {
                    return item.namee.indexOf($this.shuru) != -1;
                });
                if (this.zhi == 0) {
                    return filterP;
                } else if (this.zhi == 1) {
                    return filterP.sort(function (p1, p2) {
                        return p1.age - p2.age;
                    })
                } else if (this.zhi == 2) {
                    return filterP.sort(function (p1, p2) {
                        return p2.age - p1.age;
                    })
                }
            }
        },
        methods: {
            paixu(value) {
                this.zhi = value;
            }
        }

    });
</script>

</html>

海涛高软

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 搜索和排序

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

扫一扫