Vue的内部指令v-for

最新推荐文章于 2022-04-11 00:48:48 发布

机灵的小飞机

最新推荐文章于 2022-04-11 00:48:48 发布

阅读量256

点赞数

文章标签： vue js css vue.js html

本文链接：https://blog.csdn.net/weixin_42354407/article/details/104356449

版权

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

v-for 用来循环渲染一组 data 中的数组
形式：item in items items是指源数据数组，item是数组元素迭代的别名

基本用法：

模板写法：

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

js写法：

const app = new Vue({
	el:'app' , 
	data:{
			items:[10,21,32,43,54,6] , 
	}
})

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script 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>
    </div>
    <script>
        const app = new Vue({
            el:"#app" , 
            data:{
                items:[10,21,32,43,54,6] ,  
            } 
        })
    </script>
</body>
</html>

这是一个最简单最基础的循环，我们在Vue实例的 data 中创建一个数组 items
然后在模板中用 v-for 循环。重点是我们需要那个html标签循环，我们就写在哪个上面

对数组进行简单的排序

实际工作中，我们不仅仅是需要将 data 中的数据循环渲染到页面上，也需要对渲染到页面上的数据进行处理（例如：排序，筛选等操作）

这里我们需要用到 computed 计算属性

核心代码：

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

为了防止污染原来的数据，我们在 computed 属性中新声明了一个对象 sortItems

我们都知道在我们使用Array.sort()来进行对数组排序会出现一些小bug 。在这里插入图片描述

这里的6因该是最小的，应该排在最上面。

sort() 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。

为了避免这个坑，我们可以自己编写一个sortNumber ，然后传给我们的sort 就可以了

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

具体用法：

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

这才是真正的数字排序，这在工作中非常的常用，一定要记住。

对象的循环输出

v-for不仅仅能循环数组，还能循环数组对象！

我们先来写一个数组，数组里面写对象

 data:{
                students:[
                    {name : "小s" , age:15 } ,
                    {name : "小z" , age:18 } ,
                    {name : "小b" , age:14 }
                ]
      }

模板写法：

 <li v-for="item in students">
                {{item.name}} - {{item.age}}
 </li>

有时候我们想得到索引（加上索引序号）我们可以这样写：

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

数组对象的排序方法

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 中写 sortStudents 然后调用 sortByKey

computed : {
	 sortStudents:function(){
                    return sortByKey(this.students , 'age');
                }
}

完整代码

<!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 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="item in students">
                {{item.name}} - {{item.age}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item , index) in students">
             {{index}} - {{item.name}} - {{item.age}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item , index) in sortStudents">
                {{index}} - {{item.name}} -{{item.age}}
            </li>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el:"#app" , 
            data:{
                items:[10,21,32,43,54,6] ,  
                students:[
                    {name : "小s" , age:15 } ,
                    {name : "小z" , age:18 } ,
                    {name : "小b" , age:14 }
                ]
            } ,
            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>