Javascript 如何在ECSS中将颜色绑定到卡

我正在尝试构建一个Vue.js接口，将彩色ECSS卡返回到屏幕

post.color

（作为十六进制代码存储在单独的数据库中）是在

v-for

循环中循环的几个项目之一，如下所示：

      <div
        v-for="post in posts"
        :key="post._id"
      >
        <div class="card darken-1" :color="post.color">
          <div class="card-content left-align">
            <span class="card-title">{{ post.title }}</span>
            <p>{{ post.body }}</p>
          </div>
        </div>
      </div>

{{post.title}}
{{post.body}}

---

我正在尝试将

post.color

绑定到卡，以便使用相应的颜色设置卡的样式。我尝试将

：color=“post.color”

添加到最外层的card元素，但没有成功。将循环通过颜色属性绑定到ECSS卡的正确方法是什么？谢谢

div

是一个具有固定数量属性的HTML本机元素，它不是一个接受某些已定义的道具的Vue组件，因此，为了实现您的目标，您应该使用style属性并添加以下规则：

 <div class="card darken-1" :style="{background:post.color+'!important'}">