<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>