循环指令-v-for

最新推荐文章于 2022-03-05 16:59:07 发布

sunny_1100

最新推荐文章于 2022-03-05 16:59:07 发布

阅读量240

点赞数

分类专栏：大前段文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/l_994572281_lya/article/details/121739253

版权

大前段专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

循环指令-v-for

循环指令-v-for

官网地址

https://v3.cn.vuejs.org/guide/list.html#%E5%9C%A8-v-for-%E9%87%8C%E4%BD%BF%E7%94%A8%E5%AF%B9%E8%B1%A1

v-for

列表循环指令：数组和对象

分析

其实在vue的数据模型中，数据结构很多中种：字符串String, 数字Number。布尔Boolean，对象 Object (Date，正则，数组)，函数Function。

字符串，数字，boolean 都是通过：{{}},v-text/html/v-bind/v-model直接获取。
对象。都是通过：{{}},v-text/html/v-bind/v-model直接获取只不过：{{对象.key}}

语法

简单语法:

<div v-for="obj in dataArrKey"></div>

索引语法 (把这种写法当成默认)

<div v-for="(obj,index) in dataArrKey"></div>

因为在开发过程中，用索引开发和处理逻辑是非常频繁操作。也是后续开发中经常使用的方式。所以一定要写成这种。

标识索引语法

<div v-for="(obj,index) in dataArrKey" :key="obj.id"></div>

数组循环

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>11、属性指令-v-bind.html</title>
</head>
<body>

    <div id="app">
        <p>{{title}}</p>
        <p>{{price}}</p>
        <p>{{mark}}</p>
        <p>{{date}}</p>
        <hr>
        <p>{{user.id}} ，{{user.name}}{{user.age}}</p>
        <hr>
        
        <div v-for="(obj,index) in friends">{{index}}==={{friends[index].id}}，{{friends[index].name}}，{{friends[index].age}}</div>
        <hr>
        <div v-for="(obj,index) in friends">{{index}}==={{obj.id}}，{{obj.name}}，{{obj.age}}</div>

    </div>

    <script src="js/vue.global.js"></script>
    <script>
        var vue = Vue.createApp({
            data(){
               return {
                  title:"学习V-for",
                  price:1499,
                  mark:false,
                  date:new Date(),
                  user:{
                      id:1,
                      name:"小文文",
                      age:20
                  },
                  friends:[
                      {id:1,name:"飞哥1",age:35},
                      {id:2,name:"飞哥2",age:15},
                      {id:3,name:"飞哥3",age:13},
                      {id:4,name:"飞哥4",age:5},
                  ]
               }
            },
            methods:{

            }
        }).mount("#app");

    </script>


</body>
</html>

对象循环

1：对象也能循环吗？

2：java中的map能循环吗?

一般情况下：对象其实不需要循环的。但是为什么还要学习对象的循环呢？

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>11、属性指令-v-bind.html</title>
</head>
<body>

    <div id="app">
        <p>{{user.id}} ，{{user.name}}{{user.age}}</p>
        <hr>
        <div v-for="(value,key,index) in user">{{index}}==={{key}}==={{value}}</div>
    </div>

    <script src="js/vue.global.js"></script>
    <script>
        var vue = Vue.createApp({
            data(){
               return {
                  user:{
                      id:1,
                      name:"小文文",
                      age:20
                  }
               }
            },
            methods:{
            }
        }).mount("#app");
    </script>

</body>
</html>

实际应用

归档
统计
分组

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>11、属性指令-v-bind.html</title>
</head>
<body>

<div id="app">
    <div v-for="(value,key,index) in yingshous">
        {{key}}：
        <div style="margin-left: 20px;">
            <div v-for="(data,index) in value">
                <span>{{data.month}}==={{data.money}}</span>
            </div>
        </div>
    </div>
    <hr>
    <div v-for="(value,key,index) in yingshous">{{key}}：
        <div style="margin-left: 20px;">
            <div v-for="(data,index) in value">
                <span>{{data.month}}==={{data.money}}</span>
            </div>
        </div>
    </div>
</div>

<script src="js/vue.global.js"></script>
<script>
    var vue = Vue.createApp({
        data() {
            return {
                yingshous: {
                    "2019": [{month: 1, money: 54545}, {month: 2, money: 54545.23}],
                    "2020": [{month: 1, money: 54545}, {month: 2, money: 54545.23}],
                    "2021": [{month: 1, money: 54545}, {month: 2, money: 54545.23}],
                    "2022": [{month: 1, money: 54545}, {month: 2, money: 54545.23}],
                }
            }
        },
        methods: {}
    }).mount("#app");
</script>

</body>
</html>

案例

一年有12个月每个月都要有数据没有数据的月份自动补0


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>11、属性指令-v-bind.html</title>
</head>
<body>

<div id="app">
    <div v-for="(value,key,index) in yingshous">
        {{key}}：
        <div style="margin-left: 20px;">
            <div v-for="(data,index) in value">
                <span>{{data.month}}==={{data.money}}</span>
            </div>
        </div>
    </div>
    <hr>
    <div v-for="(value,key,index) in yingshous">{{key}}：
        <div style="margin-left: 20px;">
            <div v-for="(value,key,index) in transferdata(value)">
                <span>{{key}}==={{value}}</span>
            </div>
        </div>
    </div>
</div>

<script src="js/vue.global.js"></script>
<script>
    var vue = Vue.createApp({
        data() {
            return {
                yingshous: {
                    "2019": [{month: 1, money: 54545}, {month: 4, money: 54545.23}],
                    "2020": [{month: 1, money: 54545}, {month: 6, money: 54545.23}],
                    "2021": [{month: 1, money: 54545}, {month: 9, money: 54545.23}],
                    "2022": [{month: 1, money: 54545}, {month: 11, money: 54545.23}]
                }
            }
        },

        methods: {
            transferdata(arr) {
                // 对象容易判断，
                var obj = this.arrtoObj(arr);//{1: 54545, 4: 54545.23}
                for(let i=1;i<=12;i++){
                    if(!obj[i]){
                        obj[i] = 0;
                    }
                }
                return obj;
            },
            arrtoObj(arr) {
                var obj = {};
                for (let i = 0; i < arr.length; i++) {
                    obj[arr[i].month] = arr[i].money;
                }
                return obj;
            }
        }
    }).mount("#app");
</script>

</body>
</html>

sunny_1100

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
循环指令-v-for

文章目录循环指令-v-for官网地址v-for分析语法简单语法:索引语法 (把这种写法当成默认)标识索引语法数组循环对象循环实际应用案例循环指令-v-for官网地址https://v3.cn.vuejs.org/guide/list.html#%E5%9C%A8-v-for-%E9%87%8C%E4%BD%BF%E7%94%A8%E5%AF%B9%E8%B1%A1v-for列表循环指令：数组和对象分析其实在vue的数据模型中，数据结构很多中种：字符串String, 数字Number。布尔Boo
复制链接

扫一扫