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

    根据按钮颜色改变正方形颜色

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .d1 {
                 200px;
                height: 200px;
    
            }
        </style>
    </head>
    <body>
    <div id="change_color">
            <button @click="f1">蓝色</button>
            <button @click="f2">红色</button>
            <button @click="f3">绿色</button>
        <div class="d1" :style="{backgroundColor:bgc}"></div>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#change_color',
            data: {
                bgc:'red'
            },
            methods: {
                f1(){
                    console.log(this);
                    this.bgc='blue'
                },
                f2(){
                    this.bgc='red'
                },
                f3(){
                    this.bgc='green'
                }
            }
        })
    
    </script>
    </html>
    

    点击变色

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .wrap {
                 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <div class="wrap" :style="{backgroundColor: color}" @click="changeColor"></div>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                color: 'black',
                count: 0,
                colorArr: ['cyan', 'pink', 'green'] // 保存颜色的映射关系
            },
            methods: {
                changeColor() {
                    let n = this.count++;
                    this.color = this.colorArr[n % this.colorArr.length];
                }
            }
        })
    </script>
    </html>
    

    自动旋转变色

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box {
                 200px;
                height: 200px;
                border: 1px solid black;
                border-radius: 50%;
                overflow: hidden;
                position: relative;
            }
    
            .b1 {
                background-color: red;
                position: absolute;
            }
    
            .b2 {
                background-color: green;
                position: absolute;
            }
    
            .left {
                 100px;
                height: 200px;
                left: 0;
            }
    
            .right {
                 100px;
                height: 200px;
                right: 0;
            }
    
            .top {
                 200px;
                height: 100px;
                top: 0;
            }
    
            .buttom {
                 200px;
                height: 100px;
                bottom: 0;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <div class="box" @click="roll">
            <div class="b1" :class="c1"></div>
            <div class="b2" :class="c2"></div>
        </div>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                count: 1,
                c1: 'l',
                c2: 'r',
                c1Arr: ['left', 'top', 'right', 'buttom'],
                c2Arr: ['right', 'buttom', 'left', 'top']
            },
            methods: {
                roll() {
                    let n = this.count++;
                    this.c1 = this.c1Arr[n % 4];
                    this.c2 = this.c2Arr[n % 4];
                }
            }
        });
        // 利用定时器自动旋转图像
        setInterval(function () {
            app.roll();
        }, 500)
    </script>
    </html>
    
  • 相关阅读:
    完美解决HTML5无法上传大文件方法
    完美解决jquery无法上传大文件方法
    Word图片上传控件+整合富文本
    ckeditor粘贴word文档图片的讨论
    python之理解super及MRO列表 ( 示例版 )
    JavaXXX成长直通车_汇总
    P75 验证码识别原理分析
    P74 复习
    P73 卷积神经网络识别手写数字
    P71 激活层与池化层
  • 原文地址:https://www.cnblogs.com/shin09/p/12051524.html
Copyright © 2011-2022 走看看