vue动态改变css的值，改变placeholder的颜色。

朝雨s

于 2020-11-21 15:19:15 发布

阅读量3.2k

点赞数 3

分类专栏： css Vue 文章标签： vue css js

本文链接：https://blog.youkuaiyun.com/rRainyevening/article/details/109898669

版权

Vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

css

3 篇文章

订阅专栏

本文介绍如何使用Vue.js动态更改输入框的占位符颜色，并提供了一个具体的实现案例。此外，还展示了在微信小程序中直接设置颜色的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以改变input的placeholder颜色为例子

<div class="red_bg">
	<input ref="is" type="text" placeholder="请输入内容">
</div>

设置事件，动态更新css的值

mounted() {
	// 解决input颜色问题，动态的值
	this.$refs.is.style.setProperty('placeholderColor', this.infoData.text_color);
},

Css样式

 <style lang="less" scoped> 
     .red_bg {
        height: 100%;
        width: 100%;
        placeholderColor: #000000; // 默认颜色
        input::-webkit-input-placeholder{
            color: var(placeholderColor); // 动态值
        }
    }
 </style>

补充，微信小程序可以直接设置placeholderStyle来改颜色；

<input type="text" placeholder="请输入" placeholder-style="color: red;"></input>

参考文章： https://www.jb51.net/article/189040.htm；