Vue集合渲染

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<!--容器-->
		<div id="app">
			<!--循环数组-->
			循环数组<br />
			<span v-for="(u,i) in user">值：{{u}} 索引{{i}} <br /></span>
			循环对象数组<br>
			<span v-for="(u,i) in object">对象值：{{u.a}} 索引：{{i}}<br /></span>
			循环对象<br>
			<span v-for="(val,key,i) in app">值：{{val}} || 键：{{key}} || 索引：{{i}} <br /></span>
			循环数字<br>
			<span v-for="count in 10">{{count}}</span>

			<br>select下拉框选中对象数组
			<select v-model="selected" @change="changeShop">
				<option v-for="(store,index) in object">
					{{store.a}}
				</option>
			</select>
			<br>select下拉框选中数组
			<select v-model="selected2" @change="changeShop2">
				<option v-for="(u,i) in user">
					{{u}}
				</option>
			</select>

		</div>

		<script>
			var vm1 = new Vue({
				el: '#app', // 绑定id为appid容器
				data: {
					selected: "",
					selected2: "",
					selected3: "",
					user: [1, 2, 3, 4, 5],
					object: [{
							"a": "对象值1"
						},
						{
							"a": "对象值2"
						},
						{
							"a": "对象值3"
						}
					],
					app: {
						"a": 1,
						"b": 2,
						"c": 3
					}
				},
				methods: {
					changeShop() {
						this.secondSummary.t0RealtimeStoreList.forEach(item => {
							if (this.selected === item.shopName) {
								this.secondSummary20 = item.totalTop20Prod;
							}
						})
					},
					changeShop() {
						alert(this.selected);
					},
					changeShop2() {
						alert(this.selected2);
					}
				}
			});
		</script>
	</body>
</html>
猜你喜欢
