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>
  • 相关阅读:
    ThinkPhp框架分页查询和部分框架知识
    tp框架增删改
    WAMP中mysql服务突然无法启动 解决方法
    thinkphp框架 的 链接数据库和操作数据
    php 全局使用laravel的dd和dump
    给centos装图形界面 widowsx
    marquee标签的使用
    微信公众号开发入门教程
    laravel admin引入css js报错 https
    利用Croppie裁剪图片并后台保存
  • 原文地址:https://www.cnblogs.com/wjx-blog/p/13339308.html
Copyright © 2011-2022 走看看