Vue绑定类样式

最新推荐文章于 2024-12-12 15:46:39 发布

L＆wy

最新推荐文章于 2024-12-12 15:46:39 发布

阅读量145

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_44719554/article/details/108808754

版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细探讨了Vue.js中如何使用v-bind:class指令动态地绑定类样式，包括条件类、对象语法和数组语法的用法，以及在实际开发中的应用案例，帮助开发者更好地理解和掌握Vue的类样式绑定机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        #app .border {
            width: 300px;
            height: 300px;
            border: solid red;
        }

        #app .bgcolor {
            background-color: sienna;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="isBorder" />边框
        <input type="checkbox" v-model="isBgColor" />颜色

        <div v-bind:class="{border:isBorder,bgcolor:isBgColor}"> </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isBorder: false,
                isBgColor: false

            },

        })
    </script>
</body>

</html>