v-for属性

最新推荐文章于 2024-06-19 11:12:11 发布

百日梦想家

最新推荐文章于 2024-06-19 11:12:11 发布

阅读量1.7k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_42418169/article/details/107958647

版权

vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

v-for遍历

索引取法
遍历数组
- 语法
- 实例
遍历对象数组
- 语法
- 实例
遍历单个对象（key,value）
- 语法
- 实例
遍历普通数字
论key在v-for属性中的重要性
- 注意：
- 为什么使用组件时，必须带上key?

索引取法

<!--当遍历数组时，取索引-->
<div v-for="(item, index) in items"></div>
<!--当遍历对象时，取索引-->
<div v-for="(value, key, index) in object"></div>

遍历数组

语法

<div v-for="item in items">
  {{ item.text }}
</div>

实例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>default</title>
	<script src="../js/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<table border="" cellspacing="" cellpadding="">
				<tr v-for="item in list"><td>{{item}}</td></tr>
			</table>
		</div>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					list:[1,2,3,4,5,6,7,8,9,10]
				},
				methods:{}
			});
		</script>
	</body>
</html>

遍历对象数组

语法

<div v-for="item in items">
  {{ item.text }}
</div>

实例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>default</title>
	<script src="../js/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<table border="" cellspacing="" cellpadding="">
				<tr v-for="user in array"><td>id:{{user.id}}--name:{{user.name}}--age:{{user.age}}</td></tr>
			</table>
		</div>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					array:[
						{id:1,name:'张三1',age:18},
						{id:2,name:'张三2',age:19},
						{id:3,name:'张三3',age:20},
						{id:4,name:'张三4',age:21}
					]
				},
				methods:{}
			});
		</script>
	</body>
</html>

遍历单个对象（key,value）

语法

<div id="app">
			<p v-for="(value,key) in obj">键-->{{key}}----值---->{{value}}</p>
</div>

实例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>default</title>
	<script src="../js/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-for="(value,key) in obj">键-->{{key}}----值---->{{value}}</p>
		</div>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					obj:{
						id:1,
						name:'哈哈',
						age:18,
						score:98.6
					}
				},
				methods:{}
			});
		</script>
	</body>
</html>

遍历普通数字

语法

<div id="app">
			<p v-for="count in 10">{{count}}</p>
</div>

注意

在遍历普通数字时，起始值为1，而非0

实例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>default</title>
	<script src="../js/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-for="count in 10">{{count}}</p>
		</div>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					
				},
				methods:{}
			});
		</script>
	</body>
</html>