vue项目input的placeholder根据用户的选择改变

html部分

<el-input :placeholder="holder" v-model="searchKey">
                    <el-select v-model="searchType" placeholder="保单号" slot="prepend" style="width: 110px;">
                        <el-option v-for="item in searchTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-input>

data部分

data(){
return{
                                holder: '',//在这声明一个holder。将input的placeholder绑定上这个属性
                loading: true,
                searchTypes: [{
                    value: '1',
                    label: '保单号'
                }, {
                    value: '3',
                    label: '投保人'
                }, {
                    value: '4',
                    label: '车牌号'
                }],
                searchType: "", //关键字
}
}

watch监听部分

    watch: {
            searchType: function() { //searchType是select绑定的字段，在这里监听searchType
                if(this.searchType == '1') {
                    this.holder = '请输入保单号查询'
                } else if(this.searchType == '3') {
                    this.holder = '请输入投保人查询'
                } else {
                    this.holder = '请输入车牌号查询'
                }
            }
        },

转载于:https://www.cnblogs.com/lml-lml/p/9140169.html