Vue_列表渲染和排序

我会带着你远行 2022-12-11 04:26 225阅读 0赞

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                const app = new Vue({
                    el:"#test",
                    data: {
                        searchname:'',
                        orderType:0,//代表原本顺序，1代表升序，2代表降序
                       person:[
                           {name:'Tom',age:18},
                           {name:'Jack',age:21},
                           {name:'Jim',age:20},
                           {name:'lili',age:17},
                           ]
                    },
                    methods: {
                        setOrderType(number){
                            this.orderType = number;
                            // alert(this.orderType);
                        }
                    },
                    
                    //计算属性
                    computed: {
                        fliterPerson:function(){
                            //取出相关数据
                            const {searchname,person}=this;//ES6中的解构赋值
                            // console.log(searchneme,person);
                            let fPersons ;//过滤后最终显示的值
                            //对person进行过滤
                            // fPersons = person.filter(function(p){
                            //     return p.name.indexOf(searchname)!==-1;
                            // });
                            fPersons = person.filter(p=>p.name.indexOf(searchname)!==-1);//箭头函数，ES6新特性
                            //排序
                           
                            if(this.orderType!==0){
                                alert(this.orderType);
                                // alert(this==app);//true
                                console.log(this);//该this指向Vue即app
                                //1升序，2降序
                                fPersons.sort(function(p1,p2){//返回值为负数p1在前，正数p2在前
                                console.log(this);
    //该this指向Window:原因，fPerson使用了箭头函数，箭头函数的this从他自己作用域链的上一层继承this,fPersons.sort是由window调用的
                                    // alert(this.orderType);
                                
                                 if(app.orderType==2){//降序
                                    // alert(app.orderType);
                                    // alert("降序");
                                     return  p2.age - p1.age;
                                }else{
                                    // alert("升序");
                                    // alert(this.orderType);
                                    return  p1.age - p2.age;//升序 
                                }
                                   
                                });
                              
                            }
                            return fPersons;
                        }
                    },
                   
                });
            };
        </script>
    </head>
    <body>
        
        <div id="test">
            <input type="text" v-model="searchname">
            <ul>
                <li v-for="(p,index) in fliterPerson">
                    {
       {index}}--{
       {p.name}}--{
       {p.age}}
                </li>
            </ul>
            <button @click="setOrderType(1)">年龄升序</button>
            <button @click="setOrderType(2)">年龄降序</button>
            <button @click="setOrderType(0)">原本顺序</button>
        </div>
        
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 列表渲染

v-for 把一个数组对应为一组元素用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要使用 item in items 形式的特殊语法，i...

约定不等于承诺〃/ 2024年04月18日 23:05/ 0 赞/ 63 阅读

相关 Vue---条件渲染（v-if、v-show）、列表渲染（v-for）、列表中key的原理和作用、列表过滤（filter）、列表排序（sort）

目录一、条件渲染 1.v-if 2.v-show 3.template 二、列表渲染 1.v-for 遍历数组遍历对象遍历字符串遍历指定

た入场券/ 2024年04月07日 11:52/ 0 赞/ 52 阅读

相关 Vue_列表渲染和排序

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script

我会带着你远行/ 2022年12月11日 04:26/ 0 赞/ 226 阅读

相关 vue实现商城列表渲染

需求：利用vue实现商城列表渲染所需数据如下： mockData: [{ "id":

痛定思痛。/ 2022年08月28日 05:54/ 0 赞/ 161 阅读

相关 vue.js列表渲染

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

缺乏、安全感/ 2022年05月25日 13:39/ 0 赞/ 245 阅读

相关 Vue_条件渲染和列表渲染

一.条件渲染 1.v-if： v-if=‘name’ ：name值的true 或 false ，决定着这个标签的是否显示 2.v-show： v-show=‘sho

快来打我*/ 2022年05月22日 13:27/ 0 赞/ 265 阅读

相关列表渲染——Vue.js

1. v-for循环遍历数组 `（1）v-for` 指令需要使用 `item in items` 形式的特殊语法 <ul id="example-1">

悠悠/ 2022年04月22日 12:38/ 0 赞/ 243 阅读

相关 Vue系列六：列表渲染

1. 列表显示指令数组:v-for/index 对象:v-for/key 2. 列表的更新显示删除 item 替换 it

Love The Way You Lie/ 2022年01月30日 06:15/ 0 赞/ 275 阅读

相关 Vue列表渲染

列表渲染用\`v-for\`把一个数组对应为一组元素使用v-for遍历对象属性维护状态用`v-for`把一个数组对应为一组元素我们

墨蓝/ 2021年10月20日 00:26/ 0 赞/ 403 阅读

相关 Vue列表渲染

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

你的名字/ 2021年09月29日 04:16/ 0 赞/ 384 阅读