Vue.js学习笔记2——v-for数据的迭代

最新推荐文章于 2023-01-06 13:53:26 发布

武汉小喽啰

最新推荐文章于 2023-01-06 13:53:26 发布

阅读量465

点赞数

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43318134/article/details/101171124

版权

vue 专栏收录该内容

46 篇文章 8 订阅

订阅专栏

1. 使用v-for迭代数组

1.1 循环普通数组

<body>
    <div id="app">
        <p v-for="item in list">{{item}}</p>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                list:[1,2,3,4,5,6]
            }
        });    
    </script>
</body>

1.2 循环普通数组，带索引

<p v-for="(item,i) in list">索引值是：{{i}}------每一项的值：{{item}}</p>

2 循环对象

<body>
    <div id="app">
        <p v-for="(user,i) in list1">索引值是：{{i}}------ 对应的user对象为：id={{user.id}}     name={{user.name}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                user:{
                    id:1001,
                    name:'张三',
                    gender:'男'
                }
            }
        });    
    </script>
</body>

2.1 迭代对象中的属性

 <p v-for="(val,key) in user"> 值是：{{val}} --- 键是：{{key}}</p>

2.2 迭代对象中的属性带索引

在遍历对象的时候，除了有val和key，在第三个位置上还有索引

<p v-for="(val,key,index) in user"> 值是：{{val}} --- 键是：{{key}}  -- 索引为 {{index}} </p>

3. 迭代数字

<p v-for="i in 10"> 这是第{{i}}次循环 </p>

注意：v-for循环的表达式in后面，可以接普通数组，对象数组，对象，还可以是数字，但是，in后面接数字的时候，索引是从1开始的

4. v-for循环中的key属性

在用v-for循环的时候，一般情况下都需要绑定key属性，这样可以保证数据的唯一性，如果不绑定key属性，那么vue会按照索引来记忆数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <!-- 定义样式 -->
    <style>
        .red{
            color: brown;
        }
        .italic {
            font-style: italic;
        }
        .active{
            letter-spacing: 2em;
        }
    </style>
</head>
<body>
    <!-- 将来 new 的Vue实例，会控制这个元素中的所有内容 -->
    <div id="app">
        <label>id：</label>
        <input type="text" v-model="id" />
        <label>id：</label>
        <input type="text" v-model="name" />
        <input type="button" @click="add" value="添加"/>
        <br/><br/>
        <p v-for="user in users" :key="user.id">
            <input type="checkbox" />{{user.id}} ---- {{user.name}}
        </p>
        
    </div>

    <script>
        new Vue({
            el:'#app',  // 表示，当前我们new的这个Vue实例，要控制页面上的哪个区域
            data:{      // data属性中，存放的是el中要用到的数据
                id:'',
                name:'',
                users:[
                    {id:1001,name:'张三1'},
                    {id:1002,name:'张三2'},
                    {id:1003,name:'张三3'}
                ]
            },
            methods:{
                add(){
                    this.users.push({id:this.id,name:this.name});
                }
            }
        });    
    </script>
</body>
</html>

注意：
1. key属性只能使用number或string类型
2. key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值