Vue样式绑定之:class绑定和:style绑定

第一种样式绑定方法：:class对象绑定

<body>
    <div id="app">
        <div @click="handleClick" :class="{active: isActive}">Click Me To Change Color</div>
    </div>

    <script>
        var vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
                isActive: false
            },
            methods: {
    
    
                handleClick() {
    
    

                }
            }
        });
    </script>
</body>

在这里插入图片描述
这样默认div的class是没有的，效果如下
我们修改一下点击事件handleClick的方法：

这样就可以在点击div的时候切换这个div的class类名了，如下：

所以现在只要添加一个active的style样式就可以做出点击切换div样式的效果了

完整代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .active {
    
    
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div @click="handleClick" :class="{active: isActive}" onselectstart="return false">Click Me To Change Color</div>
    </div>

    <script>
        var vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
                isActive: false
            },
            methods: {
    
    
                handleClick() {
    
    
                    this.isActive = !this.isActive
                }
            }
        });
    </script>
</body>

</html>

样式绑定的第二种方式：:class数组绑定

在这里插入图片描述

效果：

点击以后：

样式绑定的第三种方式：:style对象绑定：

样式绑定的第三种方式：:style数组绑定：

<body>
    <div id="app">
        <div @click="handleClick" :style="[styleObj1,styleObj2]" onselectstart="return false">Click Me To Change Color
        </div>
    </div>

    <script>
        var vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
                styleObj1: {
    
    
                    color: 'black',
                    backgroundColor: 'yellow'
                },
                styleObj2: {
    
    
                    border: '2px dashed slateblue'
                }
            },
            methods: {
    
    
                handleClick() {
    
    
                    this.styleObj1.color = this.styleObj1.color === 'black' ? 'yellow' : 'black'
                    this.styleObj1.backgroundColor = this.styleObj1.backgroundColor === 'yellow' ? '#4169E1' : 'yellow'
                }
            }
        });
    </script>
</body>

Vue样式绑定之:class绑定和:style绑定

猜你喜欢