vue 官网:https://cn.vuejs.org/v2/guide/forms.html#%E9%80%89%E6%8B%A9%E6%A1%86
思路:通过下标值来获取 对象的值
代码:
<!DOCTYPE html>
<html>
<head>
<title>获取数据</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<h2>
请选择你喜欢水果ID
</h2>
<select v-model="seleced">
<option v-for="(item, key) in optionArr" :value="key">
{{ item.label }}
</option>
</select>
<h3>
<!-- 想要显示、请求label、id、en都任意 -->
{{ optionArr[seleced]['id'] }}
</h3>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data() {
return {
optionArr: [
{label: "苹果", id: 2, en: "appe", price: "10块"},
{label: "雪梨", id: 22, en: "pear", price: "2块"},
{label: "西瓜", id: 222, en: "watermelon", price: "5块"},
{label: "葡萄", id: 2222, en: "grape", price: "8块"},
{label: "樱桃", id: 'yingTao', en: "Cherry", price: "6块"},
],
seleced: 3 // 选中的数组下标,用于指向数组中,选中的对象位置
}
},
watch: {
seleced(newVal, oldVal) {
console.log('你选中的对象数据为:')
console.log( this.optionArr[newVal] )
}
}
});
</script>
</html>