javascript - 如何在 MaterializeCSS 中将颜色绑定(bind)到卡片

Question

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

Answer 1

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

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