由於專案需要，需要下拉選單進行篩選，點選（篩選）後展示不同的頁面。介於專案本身採用的技術是vue+iview，所以使用了iview自帶的“Dropdown 下拉選單”。但是自帶的只展示樣式，點選不同的選項，需要顯示點選的選項，需要自己手動去編寫。下面記錄一下實現的程式碼：（這裡在贅述一下要實現的是，點選abc，則顯示abc。點選22222，顯示222222）

思路：宣告個變數  用dropdown的click繫結個方法  去改變這個變數，把這個變數顯示在上面

<template>

  <Dropdown trigger="click" class="Tablist" @on-click="changeMenu">
                    <a href="javascript:void(0)" name="pre"  v-html='this.MenuText' >abc</a>
                    <DropdownMenu slot="list">
                        <DropdownItem  name="pre">abc</DropdownItem>
                        <DropdownItem  name="degree">222222222222</DropdownItem>
                        <DropdownItem  name="circulate">3333333333</DropdownItem>
                    </DropdownMenu>
   </Dropdown>

</template>

<script>

export default{

data(){

return{

MenuText:'abc'

}

},

methods:{

            changeMenu(name) {
//                alert('點選了這個按鈕' + name)
                if (name == 'pre') {
                    this.MenuText = 'abc'
                    根據需要可做些展示隱藏操作
                } else if (name == 'degree') {
                    this.MenuText = '222222'
                   根據需要可做些展示隱藏操作
                } else {
                    this.MenuText = '33333333'
                   根據需要可做些展示隱藏操作
                }
            }

}

}

</script>

以上是我在專案中實際遇到的，記錄一下。如有錯誤，請批評指教。