v-for 指令：解决模板循环问题

最新推荐文章于 2023-02-11 23:48:14 发布

weixin_33736048

最新推荐文章于 2023-02-11 23:48:14 发布

阅读量134

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xu951128/p/7215292.html

版权

v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <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,index) in sortStudents">
            {{index+1}}:{{student.name}}-{{student.age}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            items:[53,23,7,14,54,36,28],
            students:[
                {name:'Xurui',age:22},
                {name:'Xu',age:1},
                {name:'rui',age:18},
                {name:'yaya',age:6},
            ]
        },
        computed:{
            sortItems:function(){
                return this.items.sort(sortNumber);
            },
            sortStudents:function () {
                return sortByKey(this.students,'age');
            }
        }
    });
    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>

转载于:https://www.cnblogs.com/xu951128/p/7215292.html

weixin_33736048

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-for 指令：解决模板循环问题

v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na...
复制链接

扫一扫