Vue学习笔记(十、v-for循环普通数组)

先看一个简单的v-for循环:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
    <script src="./lib/vue.js"></script>
</head>

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

    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>

输出结果是:

这里注意两点, 一个是虽然这个循环里面没有用到Vue对象vm中的任何数据,但是这个vm对象是必须有的,因为vm对象通过"#app"才能控制id为'app'的div内的内容。第二个是这个i的值是从1开始的,不是0。

再看一个数组输出给p元素的原始写法:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{list[0]}}</p>
        <p>{{list[1]}}</p>
        <p>{{list[2]}}</p>
        <p>{{list[3]}}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list:['比亚迪','蔚来','小鹏','理想']
            },
            methods: {}
        });
    </script>
</body>

</html>

此时输出的结果是:

这里我们使用v-for的基本写法改造一下div内的p元素:

html 复制代码
    <div id="app">
        <p v-for="item in list">{{item}}</p>
    </div>

此时,我们能够得到和上面相同的结果。

这里我们再让p输出索引值,写法如下:

html 复制代码
    <div id="app">
        <p v-for="(item,i) in list">索引:{{i}}_品牌:{{item}}</p>
    </div>

此时输出结果如下:

对象遍历参考如下:

html 复制代码
<body>
    <div id="app">
        <p v-for="(car,i) in list">索引:{{i}}_品牌:{{car.brand}}_型号:{{car.model}}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    { brand: '比亚迪', model: '元PLUS' },
                    { brand: '蔚来', model: 'EC6' },
                    { brand: '小鹏', model: 'P7' },
                    { brand: '理想', model: 'L8' }
                ]
            },
            methods: {}
        });
    </script>
</body>

输出结果如下:

需要注意的是,在下面这一行中

html 复制代码
<p v-for="(car,i) in list">索引:{{i}}_品牌:{{car.brand}}_型号:{{car.model}}</p>

在(car,i)里面谁表示对象,谁表示索引与名称无关,只与位置有关,如果写成(i,car),那么i就是对象,car就是索引,前面的写法只是因为我们通常习惯用i指代索引,所以才写成(car,i)。

相关推荐
paopaokaka_luck4 分钟前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
笑鸿的学习笔记7 分钟前
qt-C++语法笔记之Stretch与Spacer的关系分析
c++·笔记·qt
一大树26 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
coder_zhx32 分钟前
Vue3自定义编程式弹窗
前端·vue.js
艾莉丝努力练剑1 小时前
【C语言】学习过程教训与经验杂谈:思想准备、知识回顾(三)
c语言·开发语言·数据结构·学习·算法
独立开阀者_FwtCoder1 小时前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
巴伦是只猫1 小时前
【机器学习笔记Ⅰ】3 代价函数
人工智能·笔记·机器学习
NetX行者1 小时前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder1 小时前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
ZZZS05161 小时前
stack栈练习
c++·笔记·学习·算法·动态规划