vue.js element-ui动态改变组件placeholder的值

element-ui根据条件动态改变组件placeholder的值

假设有一个需求，一个下拉框select，如果无选项，则显示暂无可用VPC，请先申请，如果有选项，则显示请选择

利用vue.js 的v-bind属性，将placeholder绑定一个动态参数，如下：

:placeholder="vpcPlaceholder"

该动态参数通过某个条件计算而来，因此将该参数写到computed()中最为合理，如下代码：

// placeholder动态绑定
<el-select v-model="form.vpc" :placeholder="vpcPlaceholder" @change="changeVPC">
    <el-option v-for="item in attrs.vpc" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
</el-select>

// placeholder文字根据条件生成
computed: {
    vpcPlaceholder() {
       return this.attrs.vpc.length ? "请选择" : "暂无可用VPC，请先申请"
    }
}