vue+elementui中input框动态更改placeholder

最新推荐文章于 2025-09-21 17:46:51 发布

原创最新推荐文章于 2025-09-21 17:46:51 发布 · 8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在Vue结合ElementUI的项目中，根据下拉选择框的值动态改变输入框input的placeholder。关键在于利用data存储placeholder，并通过watch监听select的选择变化来实现。

部署运行你感兴趣的模型镜像

当时项目需求是做一个下拉选择框当我选择下拉框的任意一个值的时候，下面的input的placeholder会提示。
在这里插入图片描述
注意点：要在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'
		}
	}
},