学习笔记(03):Vue2.x从入门到实战-v-for指令 ：解决模板循环问题

立即学习:https://edu.csdn.net/course/play/6823/135315?utm_source=blogtoedu

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

v-for跟for循环性质一样

1、基本用法

<div id="app">
    <ul>
        <li v-for="item in items">
            {{item}}
        </li>
    </ul>
</div>
<script>
    var Demo=new Vue({
        el:'#app',
        data:{
        items:[34,56,11,2,67,98]//初始化一个数组
        }
)}

这是一个很基础的循环，在js里面先初始化一个item的数组，再用v-for将数组的数据循环出来。

2、排序

<div id="app">
    <ul>
        <li v-for="item in sortItems">
            {{item}}
        </li>
    </ul>
</div>
<script>
    var Demo=new Vue({
        el:'#app',
        data:{
        items:[34,56,11,2,67,98]//初始化一个数组
        },
        computed:{//在输出内容之前进行编程
            sortItems:function () {
                return this.items.sort(sortNumber);
            }
        }
    })
    function sortNumber(a,b) {
        return a-b;
    }

这里有computed:{}属性，它是在内容输出之前进行编程

     computed:{//在输出内容之前进行编程
            sortItems:function () {
                return this.items.sort(sortNumber);
            }
        }
  

我们在computed里新声明了一个对象sortItems，如果不重新声明会污染原来的items数据源，这是Vue不允许的，所以要重新声明一个对象。

3、对象循环输出

在HTML模版代码：

<ul>
        <li v-for="(student,index) in students">
            {{index+1}}:{{student.name}}-{{student.age}}
        </li>
    </ul>

V-for循环输出name和age属性，index是加的顺序索引

扫描二维码关注公众号，回复： 9400526 查看本文章

JS代码：

var Demo=new Vue({
        el:'#app',
        data:{
        students:[//初始化一个对象
            {name:'JAVA',age:20},
            {name:'Python',age:18},
            {name:'C++',age:30},
            {name:'PHP',age:13}
        ]
        }
)}

在js里面初始化一个students对象，用v-for在模板里面循环输出

数组对象方法排序

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));
        })
    }

在computed属性中调用SortByKey数组对象排序方法

computed:{//在输出内容之前进行编程
            sortStudent:function () {
                return SortByKey(this.students,'age');
            }
        }