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

1、JavaScript数据类型在Vue.js中的遍历输出。以便于在html页面上方便的显示数据的类型。2、简单的遍历输出代码 2.1 JavaScript的代码window.onload = function() {vm = new Vue({el: '#app',data: {iMsg: 10,sMsg

Bwz_Learning

22907人浏览 · 2017-03-05 14:35:02

Bwz_Learning · 2017-03-05 14:35:02 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^