六、v-for循环

最新推荐文章于 2024-04-27 02:01:25 发布

大话JAVA的那些事

最新推荐文章于 2024-04-27 02:01:25 发布

阅读量533

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/newbie_907486852/article/details/83421308

版权

Vue 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

v-for循环

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for 实例</title>
    <!--引入Vue.js-->
    <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>

    <!--实例化Vue-->
    <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>