Vue基础03_v-for循环排序

v-for指令解决模板循环问题
v-for指令是循环渲染一组data中的数组,v-for 指令需要以 item in items 形式的特殊语法,items 是源数据数组并且item是数组元素迭代的别名。
基本用法
在这里插入图片描述
js写法
在这里插入图片描述
数组及对象排序
vue中的排序需要用到computed属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for 实例</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-for实例</h1>
    <hr>
    <div id="app">
       <ul>
        <!-- 需要哪个标签循v-for环就写在哪个标签里我们把
            items里的每一个变量赋予item -->
           <li v-for="item in items">  
                {{item}}
           </li>
           <hr>
           <ul>
               <li v-for="student in sortStudent">
                   {{student.name}} - {{student.age}}
               </li>
           </ul>
       </ul>
    </div>
    <script typt="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                item:[53,23,79,14,54,18],
                students:[
                    {name:'jspang',age:33},
                    {name:'panpan',age:28},
                    {name:'pande',age:25},
                    {name:'js',age:18},
                ]
            },
            computed:{
                // computed
                items:function(){
                    return this.item.sort(number);
                },
                sortStudent:function(){
                    return sortByKey(this.students,'age')
                }
            },

        })
        function number(a,b){
            return a-b
        }
        function sortByKey(array,key){
            return array.sort(function(a,b){
                var x=a[key];
                var y=b[key];
                return ((x<y)?-1:((x>y)?1:0))
            })
        }
    
    </script>

</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jason–json

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值