vue可以试着采用下面的方法

原生修改方式：

<input id=“ipt” placeholder=“请输入啊啊啊” type=“text” />

<style>

/*支持css变量，自定义*/

@supports((–a:0)){

*{

–color:blue; /*默认颜色*/

–fontSize:10px; /*默认字体大小*/

}

 

input::-webkit-input-placeholder{

 

color:var(–color);

}

::-moz-placeholder{

color:var(–color);

}

::-ms-input-placeholder{

color:var(–color);

}

}

/*不支持css变量,只能默认颜色*/

@supports(!(–a:0)){

input::-webkit-input-placeholder{

 

color:gray;

}

}

</style>

<script>

//js修改css变量

const isSupported =

  window.CSS &&

  window.CSS.supports &&

  window.CSS.supports(’–a’, 0);

//支持

if (isSupported) {

document.getElementById(“ipt”).style.setProperty(’–color’, ‘yellow’);/* ‘yellow’ 可以使用vue获取的后台数据，’–color’也可以，但要在placeholder那里提前设置默认值样式*/

} else {

  /* 无法修改变量*/

}

</script>