vue 如何动态设置 input 的 placeholder 的颜色?

Question

如题，vue如果动态设置input的颜色，网上查找的方法

  this.$refs.xxxx.style.setProperty('color', 'red')

不起效果

Answer 1

刚才经过测试找到了解决的方案：

// demo.vue
<input
      type="text"
      placeholder="输入内容"
      :style="bindInputStyle"
    />
...
computed:{
   bindInputStyle() {
        return {
          '--placeholderColor': 'red',
        }
      },
}
...

<style scoped lang="scss">
input {
  &::placeholder {
      color: var(--placeholderColor); // 动态值
    }
}
</style>

参考链接：

css的var的兼容

Answer 2

先试下：this.$refs.xxxx 是不是选中了当前 input dom元素。
答案是是的话，再试试 this.$refs.xxxx.style.color = 'red'。
然后检查下 Element 面板，查看当前 input dom的样式是否生效。