Vue中的样式绑定

class样式绑定：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
    <style type="text/css">
        .activated{
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app">
        <div @click="handleDivClick" :class="{activated: isActivated}"><h2>hello world</h2></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                isActivated: false
            },
            methods: {
                handleDivClick: function() {
                    this.isActivated = !this.isActivated
                }
            }
        })
    </script>
</body>
</html>

数组变量的绑定

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
    <style type="text/css">
        .activated{
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- <div id="app">
        <div @click="handleDivClick" :class="{activated: isActivated}"><h2>hello world</h2></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                isActivated: false
            },
            methods: {
                handleDivClick: function() {
                    this.isActivated = !this.isActivated
                }
            }
        })
    </script> -->
    <div id="app">
        <div @click="handleDivClick" :class="[activated]"><h2>hello world</h2></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                activated: ""
            },
            methods: {
                handleDivClick: function() {
                    if (this.activated === "activated") {
                        this.activated = "";
                    }else {
                        this.activated = "activated";
                    }
                }
            }
        })
    </script>
</body>
</html>

style绑定：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
    <!-- <div id="app">
        <div @click="handleDivClick" :class="{activated: isActivated}"><h2>hello world</h2></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                isActivated: false
            },
            methods: {
                handleDivClick: function() {
                    this.isActivated = !this.isActivated
                }
            }
        })
    </script> -->
    <div id="app">
        <div : @click="handleDivClick"><h2>hello world</h2></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                styleObj: {
                    color: "black"
                }
            },
            methods: {
                handleDivClick: function() {
                    if (this.styleObj.color == "black") {
                        this.styleObj.color = "red"
                    }else {
                        this.styleObj.color = "black"
                    }
                }
            }
        })
    </script>
</body>
</html>

style数组绑定：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
    <!-- <div id="app">
        <div @click="handleDivClick" :class="{activated: isActivated}"><h2>hello world</h2></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                isActivated: false
            },
            methods: {
                handleDivClick: function() {
                    this.isActivated = !this.isActivated
                }
            }
        })
    </script> -->
    <!-- <div id="app">
        <div : @click="handleDivClick"><h2>hello world</h2></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                styleObj: {
                    color: "black"
                }
            },
            methods: {
                handleDivClick: function() {
                    if (this.styleObj.color == "black") {
                        this.styleObj.color = "red"
                    }else {
                        this.styleObj.color = "black"
                    }
                }
            }
        })
    </script> -->
    <div id="app">
        <div : @click="handleDivClick"><h2>hello world</h2></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                styleObj: {
                    color: "black",
                    border:"1px solid red"
                }
            },
            methods: {
                handleDivClick: function() {
                    if (this.styleObj.color == "black") {
                        this.styleObj.color = "red"
                    }else {
                        this.styleObj.color = "black"
                    }
                }
            }
        })
    </script>
</body>
</html>

相关推荐