在 vue.js 中添加新的 class 时，该样式不适用

Question

我正在自学Vue.js。我正在使用 v-bind 将高亮 class 添加到 span 元素，这应该为元素添加 newBorder 样式，但该样式未应用。

<!DOCTYPE HTML>
<html>

<head>
    <title>Intro to v-bind</title>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .container {
            background: #cecece;
        }
        .newBorder {
            border: 5px solid yellow;
        }
    </style>
</head>

<body>

    <div id="app">

        <img v-bind:src="'assets/images/look.jpg'" v-bind:alt="'illustration of the word -Look-'" v-bind:title="'Look'">
        <span v-bind:class="{loadClass,highlight}">
            look at me!
        </span>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                loadClass: 'container',
                highlight: 'newBorder'
            }
        });
    </script>
</body>

</html>

如能指出我的错误，不胜感激。谢谢

Answer 1

只需更改 class 绑定数组语法而不是对象 :

 <span v-bind:class="[loadClass,highlight]">

<!DOCTYPE HTML>
<html>

<head>
    <title>Intro to v-bind</title>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .container {
            background: #cecece;
        }
        .newBorder {
            border: 5px solid yellow;
        }
    </style>
</head>

<body>

    <div id="app">

        <img v-bind:src="'assets/images/look.jpg'" v-bind:alt="'illustration of the word -Look-'" v-bind:title="'Look'">
        <span v-bind:class="[loadClass,highlight]">
            look at me!
        </span>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                loadClass: 'container',
                highlight: 'newBorder'
            }
        });
    </script>
</body>

</html>

在 vue.js 中添加新的 class 时，该样式不适用

The style doesn't apply when adding new class in vue.js

vue.js

vuejs2