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

• Z时代
• 2024-03-03
• 分类：IT

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

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

不起效果

回答：

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

// 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的兼容

回答：

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

以上是 vue 如何动态设置 input 的 placeholder 的颜色? 的全部内容， 来源链接： utcz.com/p/932798.html