<div?id='app'?style="margin:50px;">
????????<!--?鼠標(biāo)滑過顯示下拉列表?這里設(shè)置了觸發(fā)的方式，注意觸發(fā)方式不能使用':'綁定，以及綁定了觸發(fā)選項(xiàng)時(shí)的方法?-->
????????<el-dropdown?trigger="hover"?@command="handleCommand"??>
????????????<span?class="el-dropdown-link?el-input__inner"??style="display:block;width:200px;">
????????????????<!--?沒有選項(xiàng)的時(shí)候，默認(rèn)顯示的placeholder?-->
????????????????<span?v-if="!position"?style="color:lightslategray">請選擇一個(gè)選項(xiàng)</span>
????????????????<!--?顯示已經(jīng)選擇的選項(xiàng)，目前這里是單選?-->
????????????????<span?v-else>{{position}}</span>
????????????????<!--?下拉菜單選擇框右邊的icon?-->
????????????????<span?style="display:block;float:?right;">
????????????????????<img?src="./icon.png"?alt=""?style="margin-top:7px;">
????????????????</span>
????????????</span>
????????????<el-dropdown-menu?>
????????????????<!--?選擇'請選擇‘這個(gè)選項(xiàng)，他沒有command這個(gè)屬性，所以選擇他相當(dāng)于，清空已經(jīng)選擇的選項(xiàng)?-->
????????????????<el-dropdown-item>請選擇</el-dropdown-item>
????????????????<!--?選項(xiàng)的數(shù)據(jù)列表循環(huán)，這里的屬性，只有commang必須要使用':'綁定才能使用，這個(gè)坑了我好久，所以，為了不忘記這個(gè)事情，他所有的屬性，不管是否需要綁定，我們都使用':'綁定，這個(gè)總沒有錯(cuò)?-->
????????????????<el-dropdown-item??v-for="(item,index)?in?options"?:command='item.key'?:divided='true'>
????????????????????{{item.label}}-{{item.key}}
????????????????</el-dropdown-item>
?
????????????</el-dropdown-menu>
????????</el-dropdown>
????</div>

//?我們聲明一個(gè)數(shù)據(jù)對象，在創(chuàng)建VUE實(shí)例的時(shí)候，綁定到vue的數(shù)據(jù)中，這里的數(shù)據(jù)是響應(yīng)式的，就是當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，頁面不需要刷新就可以發(fā)生改變。
????var?obj?=?{
????????//?下拉列表顯示的數(shù)據(jù)
????????options:?[{
????????????key:'1',
????????????value:?'選項(xiàng)1',
????????????label:?'黃金糕'
????????},?{
????????????key:'2',
????????????value:?'選項(xiàng)2',
????????????label:?'雙皮奶'
????????},?{
????????????key:'3',
????????????value:?'選項(xiàng)3',
????????????label:?'蚵仔煎'
????????},?{
????????????key:'4',
????????????value:?'選項(xiàng)4',
????????????label:?'龍須面'
????????},?{
????????????key:'5',
????????????value:?'選項(xiàng)5',
????????????label:?'北京烤鴨'
????????}],
????????//?選中項(xiàng)的label
????????position:'',
????};
????//?創(chuàng)建VUE實(shí)例
????var?app?=?new?Vue({
????????el:?'#app',?//?綁定元素
????????data:?obj,
????????methods:?{
????????????/**
?????????????*?@name?選擇選項(xiàng)的時(shí)候觸發(fā)的事件（只能傳遞一個(gè)參數(shù)）?
?????????????*/
????????????handleCommand(command)
????????????{
????????????????var?self?=?this;
????????????????//?如果沒有傳遞command，那么就是清空選項(xiàng)
????????????????if(!command)
????????????????{
????????????????????self.position?=?'';
????????????????}
????????????????else
????????????????{
????????????????????//?循環(huán)json數(shù)組，我這里的目的是，將你選中的選項(xiàng)的label顯示到框中。
????????????????????for?(var?i?=?0;?i?<?self.options.length;?i++)?
????????????????????{
????????????????????????if?(self.options[i].key?==?command)?
????????????????????????{
????????????????????????????self.position?=?self.options[i].label;
????????????????????????}
????????????????????}
????????????????}
????????????},
????????},
????});