vue 對css樣式進行修改

本文轉載自查看原文 2020-07-19 12:32 14065 vue知識

一、定義樣式

    <style>
        .blueBack {
            background-color: blue;
        }

        .yellowBack {
            background-color: yellow;
        }
    </style>

二、定義兩個按鈕，一個div

    <div id="vueFirst">
        <div :class="backColor">{{info}}</div>
        <hr>
        <input type="button" value="變黃" @click="changeColorToYellow"></input>
        <input type="button" value="變藍" @click="changeColorToBlue"></input>
    </div>

三、添加click事件

    <script type="text/javascript" src="js/vue.js"></script>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#vueFirst",
            data: {
                info: "hello world",
                backColor: "blueBack"
            },
            methods: {
                changeColorToYellow() {
                    this.backColor = "yellowBack"
                },
                changeColorToBlue() {
                    this.backColor = "blueBack"
                }
            }
        })

　　完整代碼如下：

<html>

<head>
    <style>
        .blueBack {
            background-color: blue;
        }

        .yellowBack {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="vueFirst">
        <div :class="backColor">{{info}}</div>
        <hr>
        <input type="button" value="變黃" @click="changeColorToYellow"></input>
        <input type="button" value="變藍" @click="changeColorToBlue"></input>
    </div>


    <script type="text/javascript" src="js/vue.js"></script>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#vueFirst",
            data: {
                info: "hello world",
                backColor: "blueBack"
            },
            methods: {
                changeColorToYellow() {
                    this.backColor = "yellowBack"
                },
                changeColorToBlue() {
                    this.backColor = "blueBack"
                }
            }
        })
    </script>
</body>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【CSS】VUE樣式修改不生效 vue 插件 css樣式修改使用vue動態修改css樣式 vue動態修改css樣式:class Vue中修改組件的CSS樣式 vue input復選框checkbox默認樣式純css修改純css修改radio樣式修改帶!important的css樣式 vue-單獨引入css文件，設置公共的css樣式或者修改默認的vant，mint樣式【css】如何修改select的樣式