Vue知识整理，让你快速入门Vue.js：03_10.本地应用：v-for指令（根据数据生成列表结构）

被开发耽误的大厨

已于 2023-01-04 11:46:38 修改

阅读量891

点赞数

分类专栏： web前端（H5）文章标签： vue.js 前端 javascript

于 2020-03-22 19:58:40 首次发布

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/105033939

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

2、v-for指令之对象数组_结合其他指令

上一节我们介绍了图片切换的案例，对前面所学知识点进行了巩固，为了实现更为复杂的效果，咱们继续学习新的指令。

一、v-for 语法介绍

这篇我们来介绍一下 v-for 指令，v-for的作用是：根据数据生成列表结构，并且是响应式的。

学习它以后，我们就可以十分便捷的操作列表结构了，至于是什么样的列表，就看你指令的使用位置了。

列表的生成依赖于数据，它结合的类型很多，如：数组、对象、数字字符串、迭代器等。

1、v-for指令_普通数组

但是最常用的是数组，我们就结合数组来看看它的语法：

arr 就是我们要循环的数据名，跟data里面定义的名字相对应。

in 是关键字，不能修改。

item 是遍历的每一项，可以改名字，只要符合命名规则就可以了。

现在数组中的元素有5个，它就会生成5个 li标签。

如果 li标签里面有内容，它也会一并生成，

比如：里面有“你好”，就会生成5个有“你好”的 li标签，

如果它内部还有后代元素，后代元素也会作为模板一起来生成。

你可以这么理解，v-for指令的作用：是把作为模板的那个标签，还有它内部的所有内容，根据数据的个数，拷贝若干份。

如果内容有点不一样，该怎么办？item的值是可以用的。

我们也可以使用 item结合其他指令，比如这里我们使用了v-bind指令、插值表达式。

除了数组的每一项数据之外，数组的索引页也是比较常用的，但是这里就要稍微修改一下语法了，

加上一个 index ，其中 index也是一个占位，它的名字可以更改，只需要符合命名规则就可以啦。

在我们内部使用的时候，直接通过索引的方式，进行占位，这里index直接就可以使用了。

2、v-for指令_对象数组

如果数组的每一项，不是数字而是对象或者其他复杂的类型，

那么使用的时候，item就代表这一个对象或者其他复杂类型。

要获取内部的值，要在结合对应的语法，那么这里我们循环的是一个对象数组，

所以我们使用到了点语法。如果不这样用，它会把这一整个对象，全部都渲染出来。

并且 v-for 还有一个很牛逼的特点：如果数组的长度改变了，比如说添加或移除了元素，那生成的列表，也会同步改变。

二、代码验证测试

1、v-for指令之数组

（1）实例代码

<!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>13_v-for指令之数组</title>
</head>

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <ul>
            <li v-for="item in arr">{{item}}</li><br>
            <li v-for="(item,index) in arr">{{index+1}}城市：{{item}}</li><br>
            <!-- item、index都可以修改名字，对应即可。 in是关键字，不能修改 -->
            <li v-for="(itemX,index_Y) in arr">{{index_Y+1}}城市：{{itemX}}</li><br>
        </ul>
    </div>


    <script>
        var app = new Vue({
            el: "#app",
            data: {
                //arr: [10, 20, 30, 40],//数字数组
                arr: ["北京","上海","广州","深圳"],//字符串数组
            },
        })
    </script>

</body>

</html>

（2）效果展示

2、v-for指令之对象数组_结合其他指令

（1）实例代码

<!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>14_v-for指令之对象数组_结合其他指令</title>
</head>

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <!-- 直接写，输出的是对象 -->
        <h2 v-for="item in vegetables">{{item}}</h2>
        <!-- 通过点语法，获得对象的属性值 -->
        <h2 v-for="item in vegetables">{{item.num}}、{{item.name}}</h2>
        <!-- 也可以结合其他指令使用，如：v-bind -->
        <h2 v-for="item in vegetables" v-bind:title="item.name">{{item.name}}</h2>

    </div>


    <script>
        var app = new Vue({
            el: "#app",
            data: {
                vegetables:[
                    {num:"一", name:"西兰花炒鸡蛋"},
                    {num:"二", name:"西红柿炒鸡蛋"}
                ]
            },
        })
    </script>

</body>

</html>

（2）效果展示

3、v-for指令之对象数组_添加删除

（1）实例代码

<!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>15_v-for指令之对象数组_添加删除</title>
</head>

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">

        <!-- 通过点语法，获得对象的属性值 -->
        <h2 v-for="item in vegetables">{{item.num}}、{{item.name}}</h2>
 
        <input type="button" value="添加数据" @click="add"/>
        <input type="button" value="移除数据" @click="remove"/>
    </div>


    <script>
        var app = new Vue({
            el: "#app",
            data: {
                vegetables:[
                    {num:"一", name:"西兰花炒鸡蛋"},
                    {num:"二", name:"西红柿炒鸡蛋"}
                ]
            },
            methods: {
                add:function(){
                    // push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
                    this.vegetables.push({ num: "三",name:"花菜炒肉"});
                    // 在数组起始位置添加元素请使用 unshift() 方法
                    //this.vegetables.unshift({ num: "三", name: "花菜炒肉" });
                },
                remove: function () {
                    //pop() 方法用于删除并返回数组的最后一个元素
                    this.vegetables.pop();
                    //在数组起始位置删除元素请使用 shift() 方法
                    //this.vegetables.shift();
                 },
            },
        })
    </script>

</body>

</html>

（2）效果展示

三、内容-总结

被开发耽误的大厨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue知识整理，让你快速入门Vue.js：03_10.本地应用：v-for指令（根据数据生成列表结构）

目录一、v-for 语法介绍1、v-for指令_普通数组2、v-for指令_对象数组二、代码验证测试1、v-for指令之数组（1）实例代码（2）效果展示2、v-for指令之对象数组_结合其他指令（1）实例代码（2）效果展示3、v-for指令之对象数组_添加删除（1）实例代码（2）效果展示三、内容-总结上一节我们介绍了图片切换的案例，对前面......
复制链接

扫一扫