02-v-bind的动态绑定（对象语法）

林笙10

于 2021-05-03 10:39:56 发布

阅读量259

点赞数

分类专栏： # 03-动态绑定属性文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_46498227/article/details/116373924

版权

03-动态绑定属性专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨Vue框架中v-bind指令的动态绑定，重点讲解如何使用对象语法进行属性绑定，包括其工作原理和实际应用案例。

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

02-v-bind的动态绑定（对象语法）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>v-bind动态绑定（对象语法）</title>
    <style>
        .active {
            color: red;
        }

        .line {
            font-size: larger;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--普通做法-->
        <!--<h2 class="active">{{message}}</h2>-->
        <!-- <h2 v-bind:class="active">{{message}}</h2>-->
        <!--<h2 v-bind:class="{类名1：Boolean，类名2：Boolean"}>{{meassage}}</h2>-->
        <h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
        <button v-on:click="btnClick">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: "你好啊",
                isActive: true,
                isLine: true
            },
            methods: {
                btnClick: function () {
                    this.isActive = !this.isActive;
                    this.isLine = !this.isLine;
                }
            }
        })
    </script>
</body>

</html>