vue 中样式的绑定

1、class的对象绑定

//对应的css
<style>
     .active {
         color: red;
     }
</style>

<!--html 对应的代码-->
<div class="container" id="mytest">
    <div class="jumbotron">
        <!--注意:如果需要添加其他静态的class,那么只要在名称上加上引号即可,否则视为变量处理-->
        <div :class="{active:isactive,take:'take'}" @click="change">are you ok???</div>
    </div>
</div>

//javascript对应的代码
let VM = new Vue({
     el: '#mytest',
     //对应:class里的值
     data: {isactive: false},
     methods: {
         change() {
              this.isactive = !this.isactive;
        }
     }
})

2、class的数组绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <style>
        .active {
            color: red;
        }
    </style>
    <script src="./lib/vue.js"></script>
    <script>
        window.onload = function () {
            let VM = new Vue({
                el: '#mytest',
                //对应:class里的值
                data: {active: ''},
                methods: {
                    change() {
                        this.active = this.active == '' ? 'active' : ''
                    }
                }
            })
        }
    </script>
</head>
<body>
<div class="container" id="mytest">
    <div class="jumbotron">
        <!--注意:如果需要添加其他静态的class,那么只要在名称上加上引号即可,否则视为变量处理如下面的类test-->
        <div :class="[active,'test']" @click="change">are you ok???</div>
    </div>
</div>
</body>
</html>

3、style的对象绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <style>
        .active {
            color: red;
        }
    </style>
    <script src="./lib/vue.js"></script>
    <script>
        window.onload = function () {
            let VM = new Vue({
                el: '#mytest',
                data: {
                    activeObj: {
                        color: 'black',
                        'font-size': '20px'
                    }
                },
                methods: {
                    change() {
                        this.activeObj.color = this.activeObj.color == 'black' ? 'red' : 'black';
                    }
                }
            })
        }
    </script>
</head>
<body>
<div class="container" id="mytest">
    <div class="jumbotron">
        <!--用style的对象来绑定样式-->
        <div :style="activeObj" @click="change">are you ok???</div>
    </div>
</div>
</body>
</html>

4、style的数组绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <style>
        .active {
            color: red;
        }
    </style>
    <script src="./lib/vue.js"></script>
    <script>
        window.onload = function () {
            let VM = new Vue({
                el: '#mytest',
                data: {
                    activeObj: {
                        color: 'black',
                        'font-size': '20px'
                    },
                    testObj:{
                        'text-decoration':'underline'
                    }
                },
                methods: {
                    change() {
                        this.activeObj.color = this.activeObj.color == 'black' ? 'red' : 'black';
                    }
                }
            })
        }
    </script>
</head>
<body>
<div class="container" id="mytest">
    <div class="jumbotron">
        <!--用style的数组可以容纳多个对象,可以是vue里data的数据,也可以是行内数据,注意引号-->
        <div :style="[activeObj,testObj,{'font-weight':'bold'}]" @click="change">are you ok???</div>
    </div>
</div>
</body>
</html>

5、通过委托事件绑定实现

通过methods里的方法,第一个传值是event,那么通过event.target 或者 event.currentTarget来操作DOM实现类的切换,可结合jquery