动态改变placeholder的内容及其样式

一、初始化input输入框，设置placeholder基础占位符文字和样式

1、图一、图二和图三是基础标签和样式设置，需要通过v-bind动态绑定变量。

2、之所以设置key值前面加上--的原因就是var()函数必须的要求，第二章会讲到var()函数，我们需要样式绑定input标签，因为placeholder是其内置属性，我们只需要动态改变placehoder的样式即可。

二、设置button点击事件动态改变placeholder文字和样式

1、图四、图五和图六是经过点击事件后动态改变placeholder文字和样式。

2、var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。他有两个属性，var(custom-property-name, value)：custom-property-name 必需。自定义属性的名称，必需以 -- 开头。value可选。备用值，在属性不存在的时候使用。

三、总结

这是本人在前端开发中遇到了问题之一，想到可能大家在前端开发中可能也会遇到这种需求开发，所以基于vue3的语法写一个demo在此分享给大家，希望对大家有所帮助。大家可以多多发表意见，多多交流，一起进步。