Vue基础03_v-for循环排序

v-for指令解决模板循环问题v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。基本用法js写法...

Jason–json

4595人浏览 · 2020-01-27 12:37:40

Jason–json · 2020-01-27 12:37:40 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^