Vue中列表渲染中的v-for的使用

v-for的使用：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul{
        list-style: none;
        padding: 0;
    }
    li{
        padding: 10px;
        background-color: #f2f2f2;
        margin-bottom: 10px;
    }
</style>
<body>
 
     <!-- 
        v-for 用法：用in或of指令来遍历数组或对象，并将当前的元素或属性值赋给一个变量。
        :key 指令用来给Vue实例中的每个元素或组件添加一个唯一标识符，以便它能跟踪每个节点的变化。
      -->
    <div id="app">
        <ul>
            <li v-for="(name,index) in names" :key="index">{{index+1}}:{{name}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,key,index) in listObj" :key="listObj.id">{{index+1}}:{{key}}:{{item}}</li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                names:['北京','贵州','云南','重庆'],
                listObj:[
                    {
                    id:1001,
                    name:'小红',
                    age:20
                },
                {
                    id:1002,
                    name:'小刚',
                    age:25
                },
                
            ]
            }
 
        })
    </script>
</body>
</html>

posted @ 2024-09-11 17:04 一个人走在路上阅读(43) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· V-Model是v-on和v-bind的语法糖，在vue中应该尽量不要看到DOM

· Vue中局部组件

· 列表渲染-了解v-for的基本用法

· 列表渲染 v-for

· Vue 列表渲染之v-for指令

阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端

公告

记录学习、用在实际，一路前行......

昵称：一个人走在路上
园龄： 2年6个月
粉丝： 0
关注： 5

+加关注

2025年3月

日

一

二

三

四

五

六

zy8899

从0到1，一步一步的走.....

Vue中列表渲染中的v-for的使用

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<style>
	ul{
	list-style: none;
	padding: 0;
	}
	li{
	padding: 10px;
	background-color: #f2f2f2;
	margin-bottom: 10px;
	}
	</style>
	<body>

	<!--
	v-for 用法：用in或of指令来遍历数组或对象，并将当前的元素或属性值赋给一个变量。
	:key 指令用来给Vue实例中的每个元素或组件添加一个唯一标识符，以便它能跟踪每个节点的变化。
	-->
	<div id="app">
	<ul>
	<li v-for="(name,index) in names" :key="index">{{index+1}}:{{name}}</li>
	</ul>
	<hr>
	<ul>
	<li v-for="(item,key,index) in listObj" :key="listObj.id">{{index+1}}:{{key}}:{{item}}</li>
	</ul>
	</div>
	<script src="vue.js"></script>
	<script>
	var vm=new Vue({
	el:'#app',
	data:{
	names:['北京','贵州','云南','重庆'],
	listObj:[
	{
	id:1001,
	name:'小红',
	age:20
	},
	{
	id:1002,
	name:'小刚',
	age:25
	},

	]
	}

	})
	</script>
	</body>
	</html>