个人中心
gpt4 book ai didi

vue.js - 在 vue.js 中添加新类时样式不适用

转载 作者：行者123 更新时间：2023-12-05 04:31:06 29 4
gpt4 key购买 nike

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

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

最佳答案

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

 <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 - 在 vue.js 中添加新类时样式不适用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71905631/

29 4 0
文章推荐： c - 如何为特定功能禁用堆栈金丝雀？
文章推荐： c++ - 包装一个接受 std::function 的函数，以便传递接受更多参数的函数
文章推荐： properties - log4j2.properties 系统日志不工作
文章推荐： c++ - fread/fwrite 引入垃圾值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com