zoukankan      html  css  js  c++  java
  • vue作业1

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>exercise</title>
    
        <style>
            .abc{
                 200px;
                height: 200px;
    
            }
            .green{
                background-color: green;
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
        </style>
    </head>
    <body>
    <div id="id1">
    
        <div>
            <input type="button" class="btn1 " @click="change_color1">
        </div>
        <div>
            <input type="button" class="btn2 " @click="change_color2">
        </div>
        <div>
            <input type="button" class="btn3 " @click="change_color3">
        </div>
        <div :style="myStyle1" id="id2">box</div>
    </div>
    
    </body>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#id1',
            data:{
                myStyle1: {
                     '200px',
                    height: '200px',
                    backgroundColor: 'orange'
                },
    
            },
            methods:{
            change_color1(){
                this.myStyle1.backgroundColor = 'green'
            },
                change_color2(){
                this.myStyle1.backgroundColor = 'red'
            },
            change_color3(){
                this.myStyle1.backgroundColor = 'blue'
            },
            }
    
        })
    </script>
    </html>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>exercise</title>
    
    
    </head>
    <body>
    <div id="id1">
    
        <div>
            <input type="button" class="btn1 " @click="change_color1">
        </div>
    
        <div :style="myStyle1" id="id2"  >{{ num }}</div>
    </div>
    
    </body>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#id1',
            data:{
                num:0,
                color:['pink','cyan','green'],
                myStyle1: {
                     '200px',
                    height: '200px',
                    backgroundColor: 'orange'
    
                },
    
            },
            methods:{
            change_color1(){
    
                this.num += 1;
                color1 = this.num%3;
                console.log(color1);
                this.myStyle1.backgroundColor = this.color[color1];
            }
    
            }
    
        })
    </script>
    </html>
    

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>exercise</title>
    
        <style>
            .abc{
                 200px;
                height: 200px;
    
            }
            .green{
                background-color: green;
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
        </style>
    </head>
    <body>
    <div id="id1">
    
        <div>
            <input type="button" class="btn1 " @click="change_color1">
        </div>
        <div>
            <input type="button" class="btn2 " @click="change_color2">
        </div>
        <div>
            <input type="button" class="btn3 " @click="change_color3">
        </div>
        <div :style="myStyle1" id="id2">box</div>
    </div>
    
    </body>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#id1',
            data:{
                myStyle1: {
                     '200px',
                    height: '200px',
                    backgroundColor: 'orange'
                },
    
            },
            methods:{
            change_color1(){
                this.myStyle1.backgroundColor = 'green'
            },
                change_color2(){
                this.myStyle1.backgroundColor = 'red'
            },
            change_color3(){
                this.myStyle1.backgroundColor = 'blue'
            },
            }
    
        })
    </script>
    </html>
    
  • 相关阅读:
    Java学习笔记——动态代理
    Java学习随笔——RMI
    数据结构与算法——排序算法
    设计模式——装饰者模式
    Struts2中使用execAndWait后,在 Action中调用getXXX()方法报告java.lang.NullPointerException异常的原因和解决方法
    vs中debug的一个小技巧 -- debug时忽略某段代码
    SilverlightMVVM模式中的数据校验
    技能图谱
    MQ队列管理器损坏的处理方法
    informix数据库锁表处理方法
  • 原文地址:https://www.cnblogs.com/ghylpb/p/12052054.html
Copyright © 2011-2022 走看看