vue+elementui中input框 动态更改placeholder

当时项目需求是 做一个下拉选择框 当我选择下拉框的任意一个值的时候,下面的input的placeholder会提示。
vue+elementui中input框 动态更改placeholder_第1张图片
注意点:要在data中定义holder
然后用到wacth方法,监听select的变化。

<el-form-item label="类型">
	<el-select v-model="newtypeValue" placeholder="请选择" clearable >
		<el-option
			v-for="item in typeNewOptions"
			:key="item.value"
			:label="item.label"
			:value="item.value">
		</el-option>
	</el-select>
</el-form-item>
<!-- 动态更改placeholder中 holder -->
<el-form-item label="内容">
    <el-input v-model="typeContent" :placeholder="holder"></el-input>
</el-form-item>

watch: {
	newtypeValue: function () {
		if(this.newtypeValue === '0') {
			this.holder = '无事件'
		}else if(this.newtypeValue === '1') {
		    this.holder = '请输入Url 例如:http://baidu.com'
		}else if(this.newtypeValue === '2'){
		    this.holder = '请输入单曲id:2'
		}
	}
},

大家请参考这篇文章 https://blog.csdn.net/cofecode/article/details/78541970

你可能感兴趣的:(vue+elementui中input框 动态更改placeholder)