前端VUE3.0,DAY17，列表渲染之v-for

最新推荐文章于 2024-08-15 13:48:12 发布
最新推荐文章于 2024-08-15 13:48:12 发布
阅读量375 收藏 1
点赞数
分类专栏： 前端 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48681463/article/details/119492536
版权

VUE3.0,DAY17

列表渲染之基本列表v-for

1.使用v-for让vue自动进行循环遍历data中写的数据。代码中，data中的persons1写了三个id的数据。将v-for使用在一个小li标签中，在网页中则自动生成了三个小li标签数据。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本列表</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <ul>
            <!--v-for使用vue代替人力做循环，遍历-->
            <!--in后边写的是一堆数据，in前边是一堆数据中的一个数据-->
            <li v-for="XianShi in persons1">{{XianShi}}</li>
            <!--使用上边的代码后，在网页中就会自动生成三个li标签内的数据。因为data中persons1有三个数据-->
        </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false
        //创建vue实例，习惯用一个变量来接该vue实例，此处用x
        const x = new Vue({
            el: '#root',
            data() {
                return {
                    //根据person1中的数据，进行遍历，生成三个li中的显示
                    persons1: [
                        {
                            id: '001', name: '张三', age: 18
                        },
                        {
                            id: '002', name: '李四', age: 19
                        },
                        {
                            id: '003', name: '王五', age: 20
                        }
                    ]
                }
            },
        })

    </script>
</body>

</html>

在这里插入图片描述
2.实际上我们不需要显示出这么多的信息，只需要显示有用的姓名和 年龄就够了。那么就在插值语法(两个中括号内做具体修改要显示的数据)。
注意：其中v-for语句里边的in也能换成of。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本列表</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <ul>
            <!--v-for使用vue代替人力做循环，遍历-->
            <!--in后边写的是一堆数据，in前边是一堆数据中的一个数据-->
            <li v-for="XianShi in persons1">{{XianShi.name}}-{{XianShi.age}}</li>
            <!--使用上边的代码后，在网页中就会自动生成三个li标签内的数据。因为data中persons1有三个数据-->
        </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false
        //创建vue实例，习惯用一个变量来接该vue实例，此处用x
        const x = new Vue({
            el: '#root',
            data() {
                return {
                    //根据person1中的数据，进行遍历，生成三个li中的显示
                    persons1: [
                        {
                            id: '001', name: '张三', age: 18
                        },
                        {
                            id: '002', name: '李四', age: 19
                        },
                        {
                            id: '003', name: '王五', age: 20
                        }
                    ]
                }
            },
        })

    </script>
</body>

</html>

在这里插入图片描述
3.v-for不仅能遍历数据中的数组形式数据。还能遍历对象类型。注意这里v-for的括号写法。其中的a和b所代替的意义。从结果图片上看，值和关键词。即value和key的值反了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本列表</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--遍历数组-->
        <ul>
            <!--v-for使用vue代替人力做循环，遍历-->
            <!--in后边写的是一堆数据，in前边是一堆数据中的一个数据-->
            <li v-for="XianShi in persons1">{{XianShi.name}}-{{XianShi.age}}</li>
            <!--使用上边的代码后，在网页中就会自动生成三个li标签内的数据。因为data中persons1有三个数据-->
        </ul>
        <!--遍历对象-->
        <ul>
            <!--这里用个括号加a，b的形式写，其中a指的是value，b指的是key-->
            <li v-for="(a,b) in car">{{a}}-{{b}}</li>
        </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false
        //创建vue实例，习惯用一个变量来接该vue实例，此处用x
        const x = new Vue({
            el: '#root',
            data() {
                return {
                    //根据person1中的数据，进行遍历，生成三个li中的显示
                    persons1: [
                        {
                            id: '001', name: '张三', age: 18
                        },
                        {
                            id: '002', name: '李四', age: 19
                        },
                        {
                            id: '003', name: '王五', age: 20
                        }
                    ],
                    car: {
                        name: "奥迪A8",
                        price: "70w",
                        color: "black"
                    }
                }
            },
        })

    </script>
</body>

</html>

在这里插入图片描述
4.解决第3点中显示结果出现反的问题。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本列表</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--遍历数组-->
        <ul>
            <!--v-for使用vue代替人力做循环，遍历-->
            <!--in后边写的是一堆数据，in前边是一堆数据中的一个数据-->
            <li v-for="XianShi in persons1">{{XianShi.name}}-{{XianShi.age}}</li>
            <!--使用上边的代码后，在网页中就会自动生成三个li标签内的数据。因为data中persons1有三个数据-->
        </ul>
        <!--遍历对象-->
        <ul>
            <!--这里用个括号加a，b的形式写，其中a指的是value，b指的是key-->
            <li v-for="(value,k) in car" :key="k">{{k}}-{{value}}</li>
        </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false
        //创建vue实例，习惯用一个变量来接该vue实例，此处用x
        const x = new Vue({
            el: '#root',
            data() {
                return {
                    //根据person1中的数据，进行遍历，生成三个li中的显示
                    persons1: [
                        {
                            id: '001', name: '张三', age: 18
                        },
                        {
                            id: '002', name: '李四', age: 19
                        },
                        {
                            id: '003', name: '王五', age: 20
                        }
                    ],
                    car: {
                        name: "奥迪A8",
                        price: "70w",
                        color: "black"
                    }
                }
            },
        })

    </script>
</body>

</html>

在这里插入图片描述
5.v-for也可以遍历字符串，不过使用不多。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本列表</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--遍历数组-->
        <ul>
            <!--v-for使用vue代替人力做循环，遍历-->
            <!--in后边写的是一堆数据，in前边是一堆数据中的一个数据-->
            <li v-for="XianShi in persons1">{{XianShi.name}}-{{XianShi.age}}</li>
            <!--使用上边的代码后，在网页中就会自动生成三个li标签内的数据。因为data中persons1有三个数据-->
        </ul>
        <!--遍历对象-->
        <ul>
            <!--这里用个括号加a，b的形式写，其中a指的是value，b指的是key-->
            <li v-for="(value,k) in car" :key="k">{{k}}-{{value}}</li>
        </ul>
        <!--遍历字符串-->
        <ul>
            <!--char是字符，index是字符的索引值，索引值与key绑定，证明该索引值对应的字符是唯一的-->
            <!--当然这里的index与key绑定本来是不对的，因为这里不是列表或者其他的，只是字符串，所以没关系-->
            <li v-for="(char,index)  of str" :key="index">{{char}}-{{index}}</li>
        </ul>

    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false
        //创建vue实例，习惯用一个变量来接该vue实例，此处用x
        const x = new Vue({
            el: '#root',
            data() {
                return {
                    //根据person1中的数据，进行遍历，生成三个li中的显示
                    persons1: [
                        {
                            id: '001', name: '张三', age: 18
                        },
                        {
                            id: '002', name: '李四', age: 19
                        },
                        {
                            id: '003', name: '王五', age: 20
                        }
                    ],
                    car: {
                        name: "奥迪A8",
                        price: "70w",
                        color: "black"
                    },
                    str: 'hello'
                }
            },
        })

    </script>
</body>

</html>

在这里插入图片描述

总结

V- for指令:
1.用于展示列表数据
2.语法: v-for="(item, index) in XXX" ：key= “yyy”
3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

疯子的梦想＠
关注
专栏目录
Vue3.0学习笔记-循环v-for
petit_wu的专栏
03-03 2029
循环数字 count in 99 <span v-for="count in 99">{{count}},</span> 循环数组 item in listArray template:` <ul> <li v-for="item in listArray">{{item}}</li> </ul> ` template:` <ul> <li v-fo
v-for
weixin_45588014的博客
11-25 457
我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 基本用法 {{ item.message }} var example1 = new Vue({ el: '#example-1', data: { items: [ ...
初识Vue 3.0 —— v-for: 列表循环数组/对象
QUX轻博客
12-14 2454
<h5>5.列表循环</h5> <p>a.遍历数组： v-for="item in lists" ，数组格式 items: [{ ...
Vue3列表（List）
最新发布
Mr Dear的博客
08-15 1378
通用列表，支持：是否显示分割线；是否显示边框；三种尺寸；加载中；暂无数据；显示悬浮样式；列表添加操作项；自定义样式；竖排分页列表；总之；功能丰富，简单易用😁😁
vue3中的v-for
qq_44482048的博客
01-18 6081
vue3中的v-for
vue3.0 列表渲染v-for
hfz1997的博客
08-06 282
我们可以使用v-for指令基于一个数组来渲染一个列表。v-for指令的值需要使用形式的特殊语法，其中items是源数据的数组，而item是迭代项的在小程序中，必须加入key。
【Vue】Vue2.0+Vue3.0学习笔记day15（Vue3）
weixin_58214412的博客
01-20 819
目录 159.readonly与shallowReadonly 160.toRaw与markRaw 161.customRef 162.provide与inject 163.响应式数据的判断 164.CompositionAPI的优势 1.Options API 存在的问题 2.Composition API 的优势 165.Fragment组件 166.Teleport组件 167.Suspense组件 168.Vue3中的其他改变 1.全局API的转移 2.其他改变
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67402588的博客
03-09 2004
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
[项目练手笔记-谷粒商城（SpringCloud Alibaba+vue前后端分离）]day02+day03 nacos，gateway的使用、前端入门学习
叶落雨飘的博客
07-09 1977
[项目练手笔记-谷粒商城]day02+day03 nacos，gateway的使用、前端入门学习 结合SpringCloud Alibaba我们最终的技术搭配方案: SpringCloud Alibaba Nacos:注册中心(服务发现/注册) SpringCloud Alibaba Nacos:配置中心(动态配置管理) SpringCloud Ribbon:负载均衡 SpringCloud Feign:声明式HTTP客户端(调用远程服务) SpringCloud Alibaba Sentinel:服务容错
【Vue知识点- No6.】动态组件、插槽、自定义指令、tabbar案例
qq_48687155的博客
07-26 583
动态组件，插槽，自定义指令，tabbar案例
【Vue知识点- No2.】vue脚手架、基础API
qq_48687155的博客
07-29 420
vue脚手架、基础API
vue-dev for vue3.0
09-14
最新vue3的web调试插件，直接拖动到360浏览器可用，谷歌浏览器似乎有兼容性问题，但360浏览器测试使用情况非常好。注意，该插件是用在vue3.0及以上的
【前端】v-for
nmslnmsl_n的博客
02-28 95
cr:Vue指令之 v-for的使用_北海之灵的博客-CSDN博客_v-for=
Vue3.0学习 （8）- v-for列表渲染
雨Winning
09-03 908
实例 1、v-for 遍历集合、对象： <ul> <li v-for="item,index in titles">{{item}}{{index}}</li> </ul> <ul> <li v-for="value,key,index of book">{{key}}:{{value}}:{{index}}</li> </ul> 2、声明变量 const tit...
Vue 3中的v-for指令使用详解
李长渊的博客
05-28 3826
Vue 3中的v-for指令使用详解
【前端框架Vue】基本指令：v-for
weixin_55723857的博客
12-17 1201
v-for可以循环遍历并渲染数组、对象。-- 使用 v-for 循环渲染数组中的每个元素 -->{{ item }}-- 使用 v-for 循环渲染对象中的每个属性 -->array是要循环的数组，item是数组中的每个元素，index是元素的索引。object是要循环的对象，value是对象的属性值，key是对象的属性名，index是属性的索引。:key是为了给循环生成的每个元素添加一个唯一的标识，通常使用索引来作为 key。
vue3【列表渲染】v-for 详细介绍（vue中的“循环”）
热门推荐
XSL_HR的博客
10-15 2万+
在本文之前已经有文章简单概要介绍过vue中的渲染，点击帮你快速复习👏👏，包括条件渲染和列表渲染。二者同样重要，但是对于项目而言，使用更多的是列表渲染，主要表现为“循环”。下面让我们继续深入地了解列表渲染的相关内容吧~👏👏👏。
前端学习（2935）：v-for案例
歌谣的博客
04-21 165
【前端框架学习】v-for指令和key属性
Jerry‘s word
01-15 796
1.迭代数组 <p v-for="item in list">{{item}}</p> data: { list: [1, 2, 3, 4, 5, 6] } 当然，我们需要用到数组中某一项的索引值时，可以写： <p v-for="(item, i) in list">索引值是{{i}}----每一项的值是{{item}}</p> 除了循环普通数组以外，我们也可以循环复杂数组： <p v-for="user in list2"&
Vue.js 深度解析：v-for 指令与列表渲染
"深入理解Vue.js中的v-for列表渲染指令及其应用" 在Vue.js框架中，v-for是一个非常重要的指令，用于动态地渲染列表或者对象属性。这个指令允许开发者基于数组或对象进行迭代，并将结果呈现在DOM（文档对象模型）上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值