vue 中动态绑定 placeholder的值

原创于 2021-07-02 23:29:21 发布 · 7.1k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

css

本文介绍了如何在网页中使用Vue.js实现input元素的placeholder属性与数据模型的联动，包括直接绑定静态值和通过watch监听值变化动态绑定。实例演示了如何根据输入值改变placeholder的内容，便于用户体验和数据管理。

在页面中使用：placeholder 绑定一个名称

 <input type="text" :placeholder="绑定的值的名称" />

在数据部分

data(){
    return{
        名称: '具体的值',//将input的placeholder绑定上这个属性	，绑定这个值
    }
}

这个值具体为什么，视情况而定，还可以监听一个值的变化，然后根据那个值的变化，变化绑定的值的具体内容

例如

watch: {
			监听的值: function() { 
				if(this.value== '1') {
					this.name= '1'
				} else if(this.value== '3') {
					this.name= '2'
				} else {
					this.name= '3'
				}
			}
		},

标签

#vue