<!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>
原文：https://www.cnblogs.com/yaohuiqin/p/12110041.html