Javascript 如何通过在vue js中接受颜色作为道具来为占位符添加颜色？

我做了很多关于如何给占位符加颜色的研究，但没有找到一种方法。我想给占位符加上颜色，我需要在Vue.js中将颜色作为道具接收，以使其成为可重用组件

我知道如何使用css更改颜色。但在vuejs中无法获得答案

有些链接是-

---

以下是一种使用CSS变量的方法：

const MyInput={
模板：`
`,
道具：['placeholder-color']
}
新Vue({
el:“#应用程序”，
组成部分：{
我的输入
},
数据（）{
返回{
颜色：['#f00'、'#0f0'、'#00f']
}
},
方法：{
旋转（）{
this.colors.push（this.colors.shift（））
}
}
})

。我的输入{
--占位符颜色：#f0f；
}
.my input:：占位符{
颜色：var（--占位符颜色）；
}

旋转

以下是一种使用CSS变量的方法：

const MyInput={
模板：`
`,
道具：['placeholder-color']
}
新Vue({
el:“#应用程序”，
组成部分：{
我的输入
},
数据（）{
返回{
颜色：['#f00'、'#0f0'、'#00f']
}
},
方法：{
旋转（）{
this.colors.push（this.colors.shift（））
}
}
})

。我的输入{
--占位符颜色：#f0f；
}
.my input:：占位符{
颜色：var（--占位符颜色）；
}

旋转

您已使链接无法链接-为什么

要使其可重复使用组件

-显示组件啊，现在可以单击链接了@好极了，我已经添加了我的表单组件，我发现如何使用js实现它，但无法在vue中实现。const{sheet}=Object.assign（document.head.appendChild（document.createElement（“style”），{type:“text/css”}）；const placeholder style=sheet.rules[sheet.insertRule（“：：占位符{}”）].style；占位符style.color=“黄色”<代码>我已经添加了我的表单组件-这是它的一张图片，然后你需要什么？你想让我把所有的代码都贴在这里还是怎么了？你把链接弄得不可点击-为什么

要使其可重复使用组件

-显示组件啊，现在可以单击链接了@好极了，我已经添加了我的表单组件，我发现如何使用js实现它，但无法在vue中实现。const{sheet}=Object.assign（document.head.appendChild（document.createElement（“style”），{type:“text/css”}）；const placeholder style=sheet.rules[sheet.insertRule（“：：占位符{}”）].style；占位符style.color=“黄色”<代码>我已经添加了我的表单组件-这是它的一张图片，然后你需要什么？你想让我把所有的代码都粘贴到这里吗？我有那么多其他的输入字段样式，我怎么能添加所有的样式，因为我不能再绑定样式了。请检查我上面的表格，并相应地建议是否可行。Thanks@Dcoder您只需将额外的属性添加到

styles

对象或

styles

字符串（视情况而定）。假设它来自一个计算属性，那么在该计算属性中添加它应该很简单。e、 g.如果它是一个对象，则在返回

样式

之前，在某个地方使用

样式['--placeholder color']=this.placeholder color

。替代方法包括使用扩展运算符：

：style=“{…styles”“--placeholder color”：placeholder color}”

，但这确实不是必需的。styles是我在computed属性中定义的函数，但它不起作用。下面的代码是-styles（）{return{'font size'：this.size，'font family'：this.font，color:this.color'--placeholder color'：this.pcolor，}以及类似的操作-：style=“{…styles'--placeholder color'”但仍然不起作用。@d按您的计算属性似乎正确的顺序。将问题分为几个阶段。如果您检查开发人员工具中的相关元素，您应该能够看到生成的

样式

属性，以确认设置了

--占位符颜色

。如果变量设置正确，则它表明问题出在使用变量的CSS中。请确保您理解了我的示例。这不仅仅是设置

--占位符颜色

，您还必须包括一些针对输入的

：：占位符

的合适CSS，以告诉它使用该变量。对于该输入，我有很多其他样式eld那么我如何才能添加所有样式，因为我无法再次绑定样式。请检查我上面的表格，并相应地建议是否可行。Thanks@Dcoder您只需将额外的属性添加到

样式

对象或

样式

字符串（视情况而定）。假设它来自计算属性，则在在计算属性处。例如，如果它是一个对象，则在返回

样式之前的某个位置
样式['--placeholder color']=this.placeholder color
。替代方法包括使用扩展运算符：
：style=“{…style'--placeholder color'：placeholder color}”
，但这确实不必要。styles是我在computed属性中定义的一个函数，但它不起作用。下面的代码是-styles（）{return{'font size'：this.size，'font family'：this.font，color:this.color，'--placeholder color'：this.pcolor，}也可以这样做-：style=“{…styles”“--占位符颜色”：pcolor}”但仍然不起作用。@d按您的计算属性似乎正确的顺序。将问题分为几个阶段。如果您在开发人员工具中检查相关元素，您应该能够看到结果的
样式
属性，以确认
--placehold