vue动态修改placeholder颜色

测试demo Vitejs - Vite (forked) - StackBlitz

vue3中可以使用v-bind() in CSS

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

vue3中的 CSS Modules应该也能实现

SFC CSS Features

使用css变量,修改--placeholder-color的值即可

:root{
 --placeholder-color: red;
}

input::-webkit-input-placeholder{
 color: var(--placeholder -color)
}

const root = document.querySelector(':root');
root.setAttribute('style', '--placeholder-color: #f1c40f');
// 或者下面这种方式动态修改
root.style.setProperty('--placeholder-color', '#cd0000');