我在自学Vue.js.我使用v-bind将highlight类添加到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>

如果你能指出我的错误,我将不胜感激.

推荐答案

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

 <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相关问答推荐

我可以将Created()中内置的内容传递给Provide属性吗?

vue3中的转换可以在滑入但不能滑出时工作

Vue ChildComponent (GrandchildComponent) 应该更新 ParentComponent 的列表

在 Vue.js 2.6 的 Javascript 中访问 的内容

vuetify/mdi 不显示图标

使用计算(computed)属性更改视图

如何通过 setup() 发出多个参数?

JSDoc 单文件 Vue 组件

如何解决 Vue.js 中的相邻 JSX 元素必须包含在封闭标记中问题

Vue index.html favicon 问题

使用 azure devops 发布管道部署 Vue.js 应用程序

为什么 CSS 关键帧动画在具有范围样式的 Vue 组件中被 destruct ?

动态注册本地 Vue.js 组件

Vuetify - 根据另一个 Select 选项过滤 Select 数据

如何在 vuetify 中将工具提示添加到数据表标题?

Vuetify Jest 未知自定义元素

未在实例上定义,但在渲染期间引用

vuejs 配置:使用全局变量?

如何在 vue.js 2 上循环对象观察者?

组件已注册但未使用 vue/no-unused-components