zoukankan      html  css  js  c++  java
  • vue项目input的placeholder根据用户的选择改变

    html部分

    <el-input :placeholder="holder" v-model="searchKey">
    					<el-select v-model="searchType" placeholder="保单号" slot="prepend" style=" 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 = '请输入车牌号查询'
    				}
    			}
    		},
    
  • 相关阅读:
    vnode之update 还是没太懂
    vnodec创建之标签
    1054 求平均值
    1053 住房空置率
    1052 卖个萌
    1051 复数乘法
    1050 螺旋矩阵
    1049 数列的片段和
    1048 数字加密
    1047 编程团体赛
  • 原文地址:https://www.cnblogs.com/lml-lml/p/9140169.html
Copyright © 2011-2022 走看看