shangrila-xiu

112
文章
101
分类
33
标签

vue-data中的数据

vue的data中的数据的讲解

data中可以有多个键和值，每一对的键值必须有逗号分隔；下面是展示data数据的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<input v-model="msg">
		<input v-model="msg" />
		<br />
		{{msg}}
		<br />
		{{msg1}}
		<br />
		{{msg2}}
		<br />
		{{arr}}
		<br />
		{{json.a+" "+json.b+" "+json.c}}
		
		<script>
			window.onload=function(){
				new Vue({
					el:'body',
					data:{
						msg:'welcome vue',
						msg1:'vue hello',
						msg2:true,
						arr:["apple","banana","pear","orange"],
						json:{a:'I',b:'love',c:'you'}//json是Object，需要点语法在网页中显示出来
					},
				});
			};
		</script>
	</body>
</html>

循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<ul>
				<li v-for="key in arr">
					{{key }} {{$index}}
				</li>
				<li v-for="value in json">
					{{value}}
				</li>
			</ul>
		</div>
		<script>
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						arr:["apple","banana","pear","orange"],
						json:{a:'I',b:'love',c:'you'}
					},
				});
			};
		</script>
	</body>
</html>