如何在 MaterializeCSS 中将颜色绑定到卡片答案

【问题标题】：How to bind a color to a card in MaterializeCSS如何在 MaterializeCSS 中将颜色绑定到卡片
【发布时间】：2020-05-24 16:12:16
【问题描述】：

我正在尝试构建一个 Vue.js 界面，该界面将彩色 MaterializeCSS 卡片返回到屏幕。 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.color 绑定到卡片，以便为卡片设置相应颜色的样式。我尝试将:color="post.color" 添加到最外面的卡片元素，但这不起作用。将循环颜色属性绑定到 MaterializeCSS 卡的正确方法是什么？谢谢！

【问题讨论】：

标签： javascript vue.js material-design vuex materialize

【解决方案1】：

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

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

【讨论】：