zoukankan html css js c++ java

vue 对css样式进行修改

一、定义样式

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

查看全文

相关阅读:
JQuery 快速入门一篇通
 Winform 显示Gif图片
 MD5编码工具类 MD5Code.java
Asp.Net 上传图片并生成高清晰缩略图
 winform时钟c#代码
 PHP面试题汇总
 PHP条件语句语法与示例
 Android声音播放实例代码
 html和js基础功能代码备份
 纯C#实现屏幕指定区域截屏

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