Vue自定义下拉菜单如何设置默认文本为#ccc、选中值为#000？

解决方案 #

你可以通过动态绑定class区分占位状态和选中状态，具体修改代码如下：

1. 修改模板部分，增加动态类绑定 #

注：原代码中div class="form-control漏了闭合引号，已同步修正

<div class="form-control">
    <!-- 动态绑定class，判断当前展示文本是否为占位符 -->
    <div 
        class="login-placeholder" 
        :class="isPlaceholder ? 'placeholder-color' : 'selected-color'"
        @click="isAddShow=!isAddShow"
    >
        {{ addrItem }}
    </div>
    <ul v-show="isAddShow" class="l-select-wrap">
        <li 
            v-for="(item,i) in addSelectData" 
            :key="i" 
            @click="addSelectOption(item)"
            class="l-select-item"
        >
            <span>{{item.name}}</span>
        </li>
    </ul>
</div>

2. 补充计算属性与选中事件逻辑 #

data() {
    return {
        isAddShow: false,
        addrItem : "Select county",
        addSelectData: [
            { name: "Tapie" },
            { name: "Taichung" },
            { name: "Tainan" },
            { name: "Kaohsiung" },
        ]
    }
},
computed: {
    isPlaceholder() {
        // 所有占位文本统一放到数组里判断，后续新增占位符直接加进数组即可
        return ['Select county', 'Select area'].includes(this.addrItem)
    }
},
methods: {
    addSelectOption(item) {
        this.addrItem = item.name
        this.isAddShow = false // 选中后自动收起下拉菜单
    }
}

3. 增加对应样式 #

/* 占位符状态样式 */
.placeholder-color {
    color: #ccc;
}
/* 选中状态样式 */
.selected-color {
    color: #000;
}

内容的提问来源于stack exchange，提问作者Chieh YU WU