<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div :style="{width:w,height:h,backgroundColor:bgc1}">

    </div>
    <button @click="red">红</button>
    <button @click="yellow">黄</button>
    <button @click="green">绿</button>
    <hr>

    <div :style="{width:w,height:h,backgroundColor:bgc2}" @click="c2"></div>
    <hr>

    <div :style="{width:w1,height:h1,borderRadius:br,border:b,borderColor:bc,transform:t}" @click="c3"></div>
    <div :style="{width:w1,height:h1,borderRadius:br,border:b,borderColor:bc,transform:t}" @click="c4"></div>

</div>
</body>
<script>
    var count = 0;
    new Vue({
        el: '#app',
        data: {
            w1: '0',
            h1: '0',
            br: '100px',
            b: 'solid 100px',
            bc: 'green green red red',
            t: 'rotate(45deg)',

            w: '200px',
            h: '200px',
            bgc1: 'black',
            bgc2: 'black'

        },
        methods: {

            red() {
                this.bgc1 = 'red'
            },
            yellow() {
                this.bgc1 = 'yellow'
            },
            green() {
                this.bgc1 = 'green'
            },
            c2() {
                count += 1;
                if (count % 4 === 1) {
                    this.bgc2 = 'pink'
                } else if (count % 4 === 2) {
                    this.bgc2 = 'green'
                } else if (count % 4 === 3) {
                    this.bgc2 = 'cyan'
                } else if (count % 4 === 4) {
                    this.bgc2 = 'pink'
                }
            },

            c3() {
                count += 1;
                console.log(count%4)
                if (count % 4 === 1) {
                    this.t = 'rotate(45deg)';
                } else if (count % 4 === 2) {
                    this.t = 'rotate(135deg)';
                } else if (count % 4 === 3) {
                    this.t = 'rotate(225deg)'
                }else if (count % 4 === 0) {
                    this.t = 'rotate(315deg)'
                }
            }

        }
    })

</script>
</html>

（day65）作业的更多相关文章

  1. day65作业

    有 红.黄.蓝 三个按钮,以及一个200x200矩形框box,点击不同的按钮,box的颜色会被切换为指定的颜色 <body> <div id="app"> ...

  2. day65——day69

    目录 DAY65 课堂笔记 1.vue实例 2.插值表达式 3.文本指令 4.面向对象js 5.js函数补充 6.事件指令 7.属性指令 DAY66 课堂笔记 1.表单指令 2.条件指令 3.循环指令 ...

  3. python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）

    类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...

  4. SQLServer2005创建定时作业任务

    SQLServer定时作业任务:即数据库自动按照定时执行的作业任务,具有周期性不需要人工干预的特点 创建步骤:(使用最高权限的账户登录--sa) 一.启动SQL Server代理(SQL Server ...

  5. 使用T-SQL找出执行时间过长的作业

        有些时候,有些作业遇到问题执行时间过长,因此我写了一个脚本可以根据历史记录,找出执行时间过长的作业,在监控中就可以及时发现这些作业并尽早解决,代码如下:   SELECT sj.name , ...

  6. T-SQL检查停止的复制作业代理，并启动

        有时候搭建的复制在作业比较多的时候,会因为某些情况导致代理停止或出错,如果分发代理时间停止稍微过长可能导致复制延期,从而需要从新初始化复制,带来问题.因此我写了一个脚本定期检查处于停止状态的分 ...

  7. Python09作业思路及源码：高级FTP服务器开发（仅供参考）

    高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...

  8. 个人作业week3——代码复审

    1.     软件工程师的成长 感想 看了这么多博客,收获颇丰.一方面是对大牛们的计算机之路有了一定的了解,另一方面还是态度最重要,或者说用不用功最重要.这些博客里好些都是九几年或者零几年就开始学习编 ...

  9. 个人作业-week2：关于微软必应词典的案例分析

    第一部分 调研,评测 评测基于微软必应词典Android5.2.2客户端,手机型号为MI NOTE LTE,Android版本为6.0.1. 软件bug:关于这方面,其实有一些疑问.因为相对于市面上其 ...

随机推荐

  1. 怎么将DWG转PDF？分享一个在线转换方法

    了解CAD的朋友们都知道,在使用CAD制图软件绘制图纸的时候,默认的CAD图纸保存格式就是为DWG格式.但是DWG格式的文件不能够直接进行打开查看,就需要将DWG转PDF格式.那具体要怎么来进行操作呢 ...

  2. Parallel.ForEach 使用多线遍历循环

    Parallel.ForEach相对于foreach是多线程,并行操作;foreach是单线程品德操作. static void Main(string[] args) { Console.Write ...

  3. Dynamics 365-当OrganizationServiceProxy是Null的时候

    不少从事D365研发工作的朋友,可能或多或少都经历过这么一种情况,使用CrmServiceClient对象初始化一个实例,然后发现OrganizationServiceProxy对象是null.不仅如 ...

  4. 2019 DevOps 必备面试题——容器化和虚拟化

    原文地址:https://medium.com/edureka/devops-interview-questions-e91a4e6ecbf3 原文作者:Saurabh Kulshrestha 翻译君 ...

  5. Linux命令详解 三

    Linux用户和组的属性与权限本章结构1.用户账号和组账号概述2.用户账号和组账号管理3.查询账号信息4.查看目录或文件的属性5.设置目录或文件的权限6.设置目录或文件的归属 前言在linux中一切都 ...

  6. 第十六届浙江大学宁波理工学院程序设计大赛 E 雷顿女士与平衡树（并查集）

    题意 链接:https://ac.nowcoder.com/acm/contest/2995/E来源:牛客网 卡特莉正在爬树,此时她又在树梢发现了一个谜题,为了不令她分心以至于发生意外,请你帮她解决这 ...

  7. 如何使用第三方ui库vant-weapp

    如何使用第三方ui库vant-weapp 1==>创建文件夹demo 2==> 在小程序 中打开 注意 要先在小程序中打开 如果要想在小程序的开发工具中打开某一个 文件夹 要么是空文件夹 ...

  8. 关于eclipse中启动tomcat提示启动超时问题

    tomcat启动超时问题百分之九十时因为项目中mapper.xml(持久层接口的映射文件编写错误) 一般来讲文件中出错点是[忘写参数类型parameterType]   [多逗号少逗号]  [标签残缺 ...

  9. python 学习 （1-3）

    流程控制if语句 语法种类:   第⼀种语法: if 条件: #引号是将条件与结果分开. 结果1. # 四个空格,或者⼀个tab键,这个是告诉程序满⾜这个条件的 结果2.   如果条件是真(True) ...

  10. React躬行记（12）——Redux中间件

    Redux的中间件(Middleware)遵循了即插即用的设计思想,出现在Action到达Reducer之前(如图10所示)的位置.中间件是一个固定模式的独立函数,当把多个中间件像管道那样串联在一起时 ...