VueJS----[内部指令-1.3]----v-for指令：解决模板循环问题

最新推荐文章于 2025-07-08 00:59:02 发布

_cheny

最新推荐文章于 2025-07-08 00:59:02 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： VueJS 文章标签： Vue Vue学习笔记

本文链接：https://blog.youkuaiyun.com/u010996565/article/details/81176694

VueJS 专栏收录该内容

12 篇文章

订阅专栏

本文深入解析Vue.js的v-for指令，包括基本使用、排序、对象数组循环输出、解决排序bug及使用场景等，并通过具体实例演示其在实际项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

基本语法：

<li v-for="item in items">
  {{item}}
</li>

js写法：

var app=new Vue({
     el:'#app',
     data:{
         items:[12,2,6,4,24,6,56]
     }
})

这是一个最基础的循环，先在js里定义了items数组，然后在模板中用v-for循环出来，需要注意的是，需要哪个html标签循环，v-for就写在那个上边。

排序：

当我们需要对显示的数据进行排序时，可以用到Vue的compueted属性

computed:{
    sortItems:function(){
          return this.items.sort();
    }
}

我们要在computed中声名一个对象sotrItems,如果不声名，会报错，这时要将循环的那个数据改成排序后的sotrItems数组。

到这，如果一切顺利的话，会看到结果，但是还有一个小bug，当我们把数组中的值随便改一个，排序结果会吧修改后的那个数值放在最后，很显然不是我们想要的，因此需要写一个方法sortNumber来解决这个bug。

function sortNumber(a,b){
   return a-b
}

用法：

computed:{
    sortItems:function(){
    return this.items.sort(sortNumber);
    }
 }

现在这个排序是ok的。

对象循环输出

我们在做项目的时候经常会将对象数组进行遍历，那么我们就先看一下是如何进行遍历的。
1.先定义一个数组，数组里是对象数据

students:[
 {name:'Cheny',age:21},
 {name:'Boom',age:19},
 {name:'ChenDaYong',age:17},
 {name:'Chen',age:16}
]

在模板中输出：

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

也可以加入索引

<ul>
    <li v-for="(stu,index) in sortStudents">
        ({{index}}:){{stu.name}},{{stu.age}}
    </li>
</ul>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-for</h1>
    <div id="app">
        <ul>
            <li v-for="item in sortItems">
                {{item}}
            </li>
        </ul>
        <ul>
            <li v-for="(stu,index) in sortStudents">
                ({{index}}:){{stu.name}},{{stu.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                items:[12,2,6,4,24,6,56],
                students:[
                    {name:'Cheny',age:21},
                    {name:'Boom',age:19},
                    {name:'ChenDaYong',age:17},
                    {name:'Chen',age:16}
                ]
            },
            computed:{
                sortItems:function(){
                    return this.items.sort(sortNumbers);
                },
                sortStudents:function(){
                    return sortByKey(this.students,'age');
                }
            }
        });
        function sortNumbers(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>