六、v-for循环

╰半夏微凉° 2022-05-03 02:30 68阅读 0赞

#                              v-for循环 #

注意：那个标签循环，写到哪个标签上。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-for 实例</title>
        
        <script type="text/javascript" src="../assets/js/vue.js"></script>
    </head>
    <body>
        <h1>v-for实例</h1>
        <hr>
        排序的用法：
        <div id="app">
            <ul>
                <li v-for="item in sortItems">
                    {
       { item }}
                </li>
            </ul>
    
            <hr>
            输出数组中的对象：
            <ul>
                <li v-for="student in students">
                    {
       { student.name}}:{
       { student.age  }}岁
                </li>
            </ul>
    
            <hr>
            有下标的方式：
            <ul>
                <li v-for="(student,index) in students">
                    {
       {index+1}}、{
       { student.name}}:{
       { student.age  }}岁
                </li>
            </ul>
    
            <hr>
            对象形式的排序（按照年纪）：
            <ul>
                <li v-for="(student,index) in sortStudents">
                    {
       {index+1}}、{
       { student.name}}:{
       { student.age  }}岁
                </li>
            </ul>
        </div>
    
        
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',//选中id=app的元素
                data:{//声明参数,data是一个对象，对象里面是一个数组属性
                    items:[20,23,18,65,32,19,54,56,7],
                    students:[
                        {name:'lilei',age:18},
                        {name:'hanmeimei',age:17},
                        {name:'yang',age:16},
                        {name:'pangzi',age:15},
                        {name:'bendan',age:14},
                    ]
                },
                computed:{//在输出items之前做一个排序运算
                    sortItems:function(){  //sortItems是函数返回值，返回的对象不能和items同名
                        return this.items.sort(sortNumber);//this是Vue对象,括号内声明排序的方式
                    },
                    sortStudents:function(){
                        return sortByKey(this.students,'age');//this是Vue对象
                    }
                }
            })
            //有了这个函数，才能正常排序
            function sortNumber(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>