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

以改变input的placeholder颜色为例子<div class="red_bg"><input ref="is" type="text" placeholder="请输入内容"></div>设置事件，动态更新css的值mounted() {// 解决input颜色问题this.$refs.is.style.setProperty('p.

雨落青城

3118人浏览 · 2020-11-21 15:19:15

雨落青城 · 2020-11-21 15:19:15 发布

以改变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；

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^