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>

查看全文

相关阅读:
leetcode-9-basic-binary search
selection problem-divide and conquer
leetcode-8-pointer
leetcode-7-hashTable
前端学习之——js解析json数组
 Google浏览器如何加载本地文件
 JAVA全栈工程师应具备怎样的知识体系？
Java全栈工程师知识体系介绍
 数据可视化工具
 使用js的FileReader对象

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