如何从 Vue.js 中的变量内容添加类

Question

我想将一个变量传递给一个组件，该组件应该作为 class 添加到 div 。但是，Vue 添加了 variable 的名称而不是内容。

所以我通过了道具 color 其中包含 red 。

我想要什么： <div class="red">2</div>

我得到的是： <div class="color">2</div>

我认为这是一个菜鸟问题，对此深感抱歉。也许有更好的方法来做到这一点。

谢谢你的协助。

这是我的组件：

 <template>
    <div class="btn btn-outline-primary cell"
         :class="{color}"
         :id="id">
        {{ number }}
    </div>
</template>

<script>
    export default {
        name: "TileElement",
        props: ["id", "number", "color"]
    }
</script>

<style scoped>
    .green {
        color: green;
    }

    .red {
        color: red;
    }

    .yellow {
        color: yellow;
    }

    .cell {
        display: inline-block;
        float: left;
        margin: 0.1em;
        text-align: center;
        background-color: lightgray;
        width: 2.7em;
        height: 2.7em;
    }
</style>

父组件：

 <template>
    <div class="row">
        <TileElement
                v-for="tile in tiles"
                v-bind:key="tile.id"
                v-bind:number="tile.number"
                v-bind:color="tile.color"
        ></TileElement>
    </div>
</template>

<script>
    import TileElement from './TileElement.vue';

    export default {
        name: "TileRow",
        components: {
            TileElement
        },
        data: function () {
            return {
                tiles: [
                    {id: 1, number: 1, color: "green"},
                    {id: 2, number: 2, color: "red"},
                    {id: 3, number: 3, color: "yellos"}
                ]
            }
        }
    }
</script>

原文由 jules 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你只需要传递一个类，没有任何条件或其他类似的东西，那么你可以简单地为一个和任何其他数量的类使用数组：

 <div :class="[color]"></div>

但这不仅仅是你能做的。

https://v2.vuejs.org/v2/guide/class-and-style.html

原文由 bonusrk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

:class="color" 也可以工作：

 var vm = new Vue({
  el: '#app',
  data() {
    return {
      color: 'red'
    };
  }
});

 .cell { width: 50px; height: 50px; }
.red { background: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

<div id="app">
  <div class="cell" :class="color"></div>
</div>

原文由 blex 发布，翻译遵循 CC BY-SA 4.0 许可协议