码迷,mamicode.com
首页 > Web开发 > 详细

vue 对css样式进行修改

时间:2020-07-19 15:56:07      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:owb   代码   value   change   添加   code   inf   yellow   javascrip   

一、定义样式

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

 

vue 对css样式进行修改

标签:owb   代码   value   change   添加   code   inf   yellow   javascrip   

原文地址:https://www.cnblogs.com/wjx-blog/p/13339308.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!