vue.js element-ui动态改变组件placeholder的值
element-ui根据条件动态改变组件placeholder的值假设有一个需求,一个下拉框select,如果无选项,则显示暂无可用VPC,请先申请,如果有选项, 则显示 请选择利用vue.js 的v-bind属性,将placeholder绑定一个动态参数,如下::placeholder="vpcPlaceholder"该动态参数通过某个条件计算而来,因此将该参数写...
·
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,请先申请"
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)