Vue.js之遍历输出JavaScript的常见数据类型(v-for)

最新推荐文章于 2025-06-17 16:53:09 发布

Bwz_Learning

最新推荐文章于 2025-06-17 16:53:09 发布

阅读量2.2w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue Vue.js v-for Vue.js遍历Json数据

本文链接：https://blog.youkuaiyun.com/zbw18297786698/article/details/60466735

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Vue.js中实现不同数据类型的遍历及输出，并展示了使用v-for指令来处理数组和JSON数据的具体方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、JavaScript数据类型在Vue.js中的遍历输出。以便于在html页面上方便的显示数据的类型。

2、简单的遍历输出代码

2.1 JavaScript的代码

<script type="text/javascript">
			window.onload = function() {
				vm = new Vue({
					el: '#app',
					data: {
						iMsg: 10,
						sMsg: 'Hello World',
						bMsg: true,
						arrMsg: ['apple', 'orage', 'pear'],
						jsonMsg: {
							a: 'apple',
							b: 'orage',
							c: 'pear'
						}
					}

				});
			}
		</script>

2.2 html的页面代码

<div id="app" class="container">
			<br />
			整数类型的输出:  {{iMsg}}  <br />
			字符串类型的输出: {{sMsg}} <br />
			布尔类型的输出:   {{bMsg}} <br />
			数组类型的输出:  {{arrMsg}}  <br />
			json类型的输出:   {{jsonMsg}} <br />
			
     </div>

2.3 数据的遍历输出

3、使用v-for指令，遍历数组和JSON数据($index,$key)

3.1 JavaScript代码

<script type="text/javascript" src="../js/vue-1.0.21.js"></script>

		<script type="text/javascript">
			window.onload = function() {
				vm = new Vue({
					el: '#app',
					data: {
						arrMsg: ['apple', 'orage', 'pear'],
						jsonMsg: {
							a: 'apple',
							b: 'orage',
							c: 'pear'
						}
					}

				});
			}
		</script>

3.2 Html页面代码

<div id="app" class="container">
			<hr /> 使用 v-for指令来输出数组和json类型的数据<br />
			<hr /> 数组的输出
			<ul>
				<li v-for=" value in arrMsg">
					数组的数据 :{{value}} , 内置变量数组下标:{{$index}}
				</li>
			</ul>
			<hr /> json数据的输出----获取key和value方式一
			<li v-for=" (key,value) in jsonMsg">
				json的key的内容 :{{key}} , json的value的内容:{{value}} , 下标index的内容:{{$index}}
			</li>
			<hr /> json数据的输出----获取key和value方式二（内置变量$key）
			<li v-for=" value in jsonMsg">
				json的key的内容 :{{$key}} , json的value的内容:{{value}} , 下标index的内容:{{$index}}
			</li>
			<hr />
		</div>

3.3 结果

4、完整的代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script type="text/javascript" src="../js/vue-1.0.21.js"></script>

		<script type="text/javascript">
			window.onload = function() {
				vm = new Vue({
					el: '#app',
					data: {
						arrMsg: ['apple', 'orage', 'pear'],
						jsonMsg: {
							a: 'apple',
							b: 'orage',
							c: 'pear'
						}
					}

				});
			}
		</script>
	</head>

	<body>
		<div id="app" class="container">
			<hr /> 使用 v-for指令来输出数组和json类型的数据<br />
			<hr /> 数组的输出
			<ul>
				<li v-for=" value in arrMsg">
					数组的数据 :{{value}} , 内置变量数组下标:{{$index}}
				</li>
			</ul>
			<hr /> json数据的输出----获取key和value方式一
			<li v-for=" (key,value) in jsonMsg">
				json的key的内容 :{{key}} , json的value的内容:{{value}} , 下标index的内容:{{$index}}
			</li>
			<hr /> json数据的输出----获取key和value方式二（内置变量$key）
			<li v-for=" value in jsonMsg">
				json的key的内容 :{{$key}} , json的value的内容:{{value}} , 下标index的内容:{{$index}}
			</li>
			<hr />
		</div>

	</body>

</html>