javascript - 如何使用 vue.js 添加动态引导类？

Question

我正在学习 vue.js。我想将动态类值添加到我的模板中。但是，当我尝试添加 bootstrap 4 类时出现以下错误:

v-bind' directives require an attribute value

我将值true放入类img-fluid中，但没有解决问题。我的模板如下:

<template>
    <div>
        <div class="row justify-content-center align-items-center">
            <img src="images/retro.jpg" v-bind:class="{card:true, invisible:pc_left_invisible}" id="pc_left" v-bind:rel="pc_left_rel">
            <img src="images/retro.jpg" v-bind:class="{card:true, invisible:pc_center_invisible}" id="pc_center" v-bind:rel="pc_center_rel">
            <img src="images/retro.jpg" v-bind:class="{card:true, invisible:pc_right_invisible}" id="pc_right" v-bind:rel="pc_right_rel">
        </div>
        <div class="row">
            <div class="col-3 d-flex justify-content-start">
                <img src="images/retro.jpg" v-bind:class="{card:true, invisible:pack_cards_invisible}" id="pack_cards" rel="0">
            </div>
            <div class="col-6 d-flex justify-content-center">
                <img v-bind:src="pc_game_src" v-bind:class="{card:true, invisible:pc_game_invisible, img-fluid: true}" id="pc_game" v-bind:rel="pc_game_rel"> <!--here the error-->
                <img v-bind:src="player_game_src" v-bind:class="{card:true, invisible:player_game_invisible}" id="player_game" v-bind:rel="player_game_rel">
            </div>
            <div class="col-3 d-flex justify-content-end">
                <img v-bind:src="game_briscola_src"  v-bind:class="{card:true, invisible:game_briscola_invisible}" id="game_briscola" v-bind:rel="game_briscola_rel">
            </div>
        </div>
        <div class="row justify-content-center align-items-center">
            <img @click="play($event)" v-bind:src="player_left_src" v-bind:class="{card:true, invisible:player_left_invisible}" id="player_left" v-bind:rel="player_left_rel">
            <img @click="play($event)" v-bind:src="player_center_src" v-bind:class="{card:true, invisible:player_center_invisible}" id="player_center" v-bind:rel="player_center_rel">
            <img @click="play($event)" v-bind:src="player_right_src" v-bind:class="{card:true, invisible:player_right_invisible}" id="player_right" v-bind:rel="player_right_rel">
        </div>
    </div>
</template>

这是样式部分:

<style scoped>
.card {
    border-radius: 10%;
    height: 30vh;
    width: 20vh;
}
</style>

所以产生问题的类是引导类img-fluid。可以帮忙吗？

Answer 1

这实际上是一个简单的 JavaScript 问题，因为在 JavaScript 中我们不能使用带有连字符 - 的对象键，例如:

const obj = { img-fluid: true }
console.log( obj )
//==> Uncaught SyntaxError: Unexpected token '-'

您使用带连字符的键可能会出现语法错误。我们可以通过将 key 括在引号中来轻松解决此问题，例如:

const obj = { 'img-fluid': true }
console.log( obj )

所以，在 vuejs 中你也可以解决这个问题:

v-bind:class="{card:true, invisible:pc_game_invisible, 'img-fluid': true}"