频道栏目
首页 > 资讯 > JavaScript > 正文

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

17-03-07        来源:[db:作者]  
收藏   我要投稿

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数据。

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>

相关TAG标签
上一篇:体验JVM编译Java文件
下一篇:JS实现进制转换
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站