> For the complete documentation index, see [llms.txt](https://sunzsh.gitbook.io/xiaoshan.bug/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sunzsh.gitbook.io/xiaoshan.bug/vue-zu-jian-ru-he-shi-xian-ren-yi-css-shu-xing-de-dong-tai-she-zhi.md).

# 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

大家看 蓝色

红色

然后我们再改一个色号

好这样就可以了


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://sunzsh.gitbook.io/xiaoshan.bug/vue-zu-jian-ru-he-shi-xian-ren-yi-css-shu-xing-de-dong-tai-she-zhi.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.