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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了v-for 指令：解决模板循环问题相关的知识，希望对你有一定的参考价值。

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>

　　

以上是关于v-for 指令：解决模板循环问题的主要内容，如果未能解决你的问题，请参考以下文章

第十节:Vue指令:v-for列表循环

Vue 3 & Composition API：v-for 循环中的模板引用错误：仅获取代理

Vue.js 循环语句

vue中的v-for循环指令使用

laravel 刀片模板中的 Vue.js v-for 循环

Vue.js 模板指令