<template> <div class="home"> <el-dropdown :hide-on-click="false" @command="statusChange"> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right" /> </span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item v-for="(item,index) in dropList" :key="index" :command="item.value" :class="{'selected':status==item.value}" >{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> <script> // @ is an alias to /src export default { name: 'Home', components: {}, data() { return { status: '2', dropList: [ { value: '1', label: '黄金糕' }, { value: '2', label: '狮子头' }, { value: '3', label: '螺蛳粉' }, { value: '4', label: '双皮奶' } ], } }, methods: { statusChange(val) { console.log('drop statusChange', val) this.status = val }, } } </script> <style scoped lang="scss"> .selected{ color:red; } </style>