如何使用 VUE JS 使用颜色选择器/色板动态更改 div 的背景颜色

【问题标题】：How to dynamic change the background color of div using color picker/color swatches using VUE JS如何使用 VUE JS 使用颜色选择器/色板动态更改 div 的背景颜色
【发布时间】：2021-04-07 05:45:47
【问题描述】：

是否可以动态更改类.hasPicked的背景颜色

我想通过使用输入颜色选择器和色板来更改背景颜色。我有在 codepen 中实现的代码。这里：https://codepen.io/jcfloirendo01/pen/abpygdM

【问题讨论】：

标签： javascript vue.js colors picker

【解决方案1】：

您的 Codepen 将 div.hasPicked 的背景颜色绑定到 isFontColorSelected（颜色值）：

<div class="hasPicked" :style="{backgroundColor: isFontColorSelected}">

...但只有样本选择器绑定到isFontColorSelected。颜色选择器绑定到一个不同的变量：isFontColorPicked（似乎没有使用）。

<input type="color" v-model="isFontColorPicked">

解决方法是将颜色选择器绑定到与其他变量相同的变量：

<input type="color" v-model="isFontColorSelected">
                                      ?

updated codepen

【讨论】：