免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

Vue中的樣式綁定

class樣式綁定：

創新互聯專業為企業提供膠州網站建設、膠州做網站、膠州網站設計、膠州網站制作等企業網站建設、網頁設計與制作、膠州企業網站模板建站服務，10年膠州做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

<!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>

分享題目：Vue中的樣式綁定
當前路徑：http://m.newbst.com/article2/jeshic.html

成都網站建設公司_創新互聯，為您提供小程序開發、服務器托管、關鍵詞優化、網站設計、網站改版、商城網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

網站托管運營