<div?id='app'?style="margin:50px;">
????????<!--?鼠標滑過顯示下拉列表?這里設置了觸發(fā)的方式，注意觸發(fā)方式不能使用':'綁定，以及綁定了觸發(fā)選項時的方法?-->
????????<el-dropdown?trigger="hover"?@command="handleCommand"??>
????????????<span?class="el-dropdown-link?el-input__inner"??style="display:block;width:200px;">
????????????????<!--?沒有選項的時候，默認顯示的placeholder?-->
????????????????<span?v-if="!position"?style="color:lightslategray">請選擇一個選項</span>
????????????????<!--?顯示已經(jī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?>
????????????????<!--?選擇'請選擇‘這個選項，他沒有command這個屬性，所以選擇他相當于，清空已經(jīng)選擇的選項?-->
????????????????<el-dropdown-item>請選擇</el-dropdown-item>
????????????????<!--?選項的數(shù)據(jù)列表循環(huán)，這里的屬性，只有commang必須要使用':'綁定才能使用，這個坑了我好久，所以，為了不忘記這個事情，他所有的屬性，不管是否需要綁定，我們都使用':'綁定，這個總沒有錯?-->
????????????????<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>

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