很多時候我們在做頁面的時候會遇到這樣的一個情況，我們需要顯示一個下拉框，然後需要把選擇的值傳到後臺，而頁面需要顯示我們選擇的數據項的名稱，我們可能會這樣實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title>Title</title>
</head>
<body>
<div id="app">
<p>用Array實現：</p>
<el-select v-model="selectId" @change="changeItem">
<el-option v-for="(item,index) in showList" :value="item.id" :label="item.name" :key="index"></el-option>
</el-select>
<p v-show="selectId">{{`當前選擇：${showText},id爲${selectId}`}}</p>
</div>
</body>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: function () {
return {
selectId:'',
showText:'',
selectMapId:'',
showList: [
{name: '西遊記', id: 1},
{name: '三國演義', id: 2},
{name: '水滸傳', id: 3},
{name: '紅樓夢', id: 4}
]
}
},
methods: {
changeItem() {
for (let i in this.showList) {
if (this.showList[i].id == this.selectId) {
this.showText = this.showList[i].name
break
}
}
}
}
})
</script>
</html>
可以看到，我們通過綁定change事件來遍歷this.showList數組，來獲取當前下拉框選擇的值。
我們再看看用對象來實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title>Title</title>
</head>
<body>
<div id="app">
<p>用Map實現：</p>
<el-select v-model="selectId">
<el-option v-for="(val,key) in showMap" :value="key" :label="val" :key="key"></el-option>
</el-select>
<p v-show="selectId">{{`當前選擇：${showMap[selectId]},id爲${selectId}`}}</p>
</div>
</body>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: function () {
return {
selectId:'',
showText:'',
selectMapId:'',
showList: [
{name: '西遊記', id: 1},
{name: '三國演義', id: 2},
{name: '水滸傳', id: 3},
{name: '紅樓夢', id: 4}
]
}
},
methods: {},
computed: {
showMap(){
let map = {}
this.showList.forEach(row =>{
map[row.id] = row.name
})
return map
}
},
})
</script>
</html>
可以看到，我們用
computed計算屬性來根據this.showList來得到一個新的變量showMap，這樣講數組轉換成了我們需要的對象，然後頁面上遍歷的是這個對象，最後我們取值就不需要綁定change事件通過遍歷來獲取選中的值了，直接通過對象取值${showMap[selectId]}就ok了.
可以看到，講數據轉換爲對象之後，再來取值等一系列操作，就省了很多代碼了。
最後們看一下運行截圖。
所有代碼的源碼可以在github上下載的到：下載地址，
點擊可查看運行效果：線上地址
最後可以關注我的個人公衆號，實時查看更多更好的文章:
