vue样式绑定，对象方式

最新推荐文章于 2024-04-08 09:01:13 发布

吃瓜的阳大王

最新推荐文章于 2024-04-08 09:01:13 发布

阅读量263

点赞数

分类专栏：从零开始学习VUE 文章标签： vue vue.js html5

本文链接：https://blog.csdn.net/qq_44822110/article/details/105054965

版权

从零开始学习VUE 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Vue</title>
    <style>
        .active {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }

        .error {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="app">
        //<!-- 直接在class操作类，data里面返回true或者false -->
        // 当isActive和isError为true时，active和error类才有效，否则没有效果
        <div :class="{active:isActive,error:isError}">测试</div>
        <button @click="handle">切换</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true,
                isError: true
            },
            methods: {
                handle: function () {
                    // 在true 和false 之间切换
                    this.isActive = !this.isActive
                    this.isError = !this.isError
                }
            }
        })
    </script>
</body>

</html>