<!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. Dynamics 365中的公告(Post)分析

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  2. Docker 中卷组管理

    一.概念 数据卷是一个可供一个或多个容器使用的特殊目录实现让容器的一个目录和宿主机中的一个文件或者目录进行绑定.数据卷 是被设计用来持久化数据的,对于数据卷你可以理解为NFS中的哪个分享出来的挂载点, ...

  3. SQL Server Agent作业执行CmdExec(bat)命令报权限问题

    写了一个bat命令,定期去清理一些SQL Server的Dump文件,然后配置成SQL Server作业,作业执行时报权限错误,具体错误信息如下所示: Message Executed as user ...

  4. Mac录制或保存视频后如何放大？

    想要在录制和拍摄视频后在喜欢的场景(例如Mark)中放大视频吗?本文将向您展示如何放大视频并通过裁剪视频和“平移和缩放”效果来制作Ken Burns效果.Filmora9是一款功能强大的视频编辑器,具 ...

  5. 好程序员web前端分享前端学习路线自学如何找到工作

    好程序员web前端分享前端学习路线自学如何找到工作,自学能不能学会WEB前端并且找到WEB前端开发岗位的工作取决于自身条件,如果基础好,自律性强那么将会容易很多,还有就是自学最难克服的并不是知识点,而 ...

  6. Github新项目Dress（好耶是女装）

    面向可爱的蓝孩子 (/ω＼) 的 git 学习实践项目,包含了600多位蓝孩子的女装照,访问前做好心理准备. 每个人都可以成为这个项目的参与者 访问地址:https://github.com/kome ...

  7. Java中的String为什么要设计成不可变的？

    一.不可变类和不可变对象 Normally,you create an object and allow its contents to be changed later.However ,occas ...

  8. Java题库——Chapter3 操作符、选择

    1)The "less than or equal to" comparison operator in Java is ________. A)<< B) != C) ...

  9. Fiddler使用过程中容易忽略的小技巧

    fiddler的基本使用,在之前的一篇博文中有详细介绍,可参见Fiddler抓包工具使用详解,今天来分享几个容易忽略的小技巧. 1.ios机装了证书,依然抓不到包 近期总被同事问及ios机装了证书,但 ...

  10. Git - Git基本常用命令

    Git基本常用命令 mkdir:         XX (创建一个空目录 XX指目录名) pwd:          显示当前目录的路径. git init          把当前的目录变成可以管理 ...