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>

Logo

前往低代码交流专区

更多推荐