Vue中的样式绑定

时间：2019-07-11 09:14:42 阅读：84 评论：0 收藏：0 [点我收藏+]

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}"><h1>hello world</h1></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}"><h1>hello world</h1></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]"><h1>hello world</h1></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}"><h1>hello world</h1></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 :style="styleObj" @click="handleDivClick"><h1>hello world</h1></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}"><h1>hello world</h1></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 :style="styleObj" @click="handleDivClick"><h1>hello world</h1></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 :style="[styleObj, {background:‘yellow‘}]" @click="handleDivClick"><h1>hello world</h1></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>

Vue中的样式绑定

原文：https://blog.51cto.com/5660061/2419021

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)