# vue组件如何实现任意css属性的动态设置

{% embed url="https://v.douyin.com/r8f1sUe/" %}

{% embed url="https://www.bilibili.com/video/BV17d4y1B7Lg/" %}

先看这个评论：他想封装一个组件

然后呢动态设置里边的背景颜色

那我这写了一个demo

我们简单来试一下啊

现在这是一个静态的颜色

大家看很简单就一个颜色

那首先

我们先把这个颜色提取成一个变量

我们在这

bgColor

我们换一个blue

然后呢把这换成这个变量

我们来试一下

大家看 蓝色了

然后接下来呢我们想既然他能写在这

他是不是也可以写在行内啊

我们试一下

style

好我们再换一个颜色

大家看 变了

那接下来我们验证一下

他这个样式变量 会不会串（影响其他元素）

我们再来一个不声明这个样式的

然后呢叫 bg2 test

然后下边呢我们再来一个bg

大家看！这个边量不会串

只会应用到第一个上面

所以没有问题

那我们是不是可以考虑

把这个style里面这一串

声明成一个计算属性呢

我们先来试一下啊把

这块改成一个declare

然后呢把它改成这个好

然后在下边我们先声明一个data

return这就叫bgColor

这是这个颜色变量

我们先是默认是红色吧

然后呢我们再写一个computed属性

declareBgColor

然后return一个字符串就好了

\--bgColor

等于this.bgColor

好我们再来试一下

大家看！红色我们把它改一下

蓝色 blue

OK 没问题

我们再来试一下

把它绑定到一个input里面

然后呢 v-model

等于

bgColor

大家看 蓝色

红色

然后我们再改一个色号

好这样就可以了
