1. 有 红、黄、蓝 三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色
  1. <body>
  2. <div id="app">
  3.     <p :style="{width:w,height:h,backgroundColor:bg}">{{ msg }}</p>
  4.     <button @click="fn('red')">红</button>
  5.     <button @click="fn('yellow')">黄</button>
  6.     <button @click="fn('blue')">蓝</button>
  7.     <button @click="fn('white')">取消</button>
  8. </div>
  9. <script src="js/vue.js"></script>
  10. <script>
  11.     new Vue({
  12.         el:'#app',
  13.         data:{
  14.             msg:'box',
  15.             w:'200px',
  16.             h:'200px',
  17.             bg:'red'
  18.         },
  19.         methods:{
  20.             fn(color){
  21.                 this.bg = color
  22.             }
  24.         }
  25.     })
  26. </script>
  27. </body>

2.有一个200x200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推

  1. <body>
  3. <div id="app">
  5.     <button :style="{width:w,height:h,backgroundColor:c}" @click="changeColor">{{ wrap }}</button>
  6.     <p>点击的次数：{{ num }}</p>
  7. </div>
  9. <script src="js/vue.js"></script>
  10. <script>
  11.     new Vue({
  12.         el: '#app',
  13.         data: {
  14.             wrap: '我是wrap框，请点我!',
  15.             w:'200px',
  16.             h:'200px',
  17.             c:'white',
  18.             num: 0,
  19.             colorArr:['pink','green','cyan'],
  20.         },
  21.         methods:{
  22.             changeColor(){
  23.                 let n = this.num += 1;
  24.                 this.c = this.colorArr[n % 3];
  25.             }
  26.         }
  27.     })
  28. </script>
  29. </body>
  1. 图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成下红上绿，依次类推
  1. <style>
  2.         .box {
  3.             width: 200px;
  4.             height: 200px;
  5.             border: 1px solid black;
  6.             border-radius: 50%;
  7.             overflow: hidden;
  8.             position: relative;
  9.         }
  11.         .b1 {
  12.             background-color: red;
  13.             position: absolute;
  14.         }
  16.         .b2 {
  17.             background-color: green;
  18.             position: absolute;
  19.         }
  21.         .l {
  22.             width: 100px;
  23.             height: 200px;
  24.             left: 0;
  25.         }
  27.         .r {
  28.             width: 100px;
  29.             height: 200px;
  30.             right: 0;
  31.         }
  33.         .t {
  34.             width: 200px;
  35.             height: 100px;
  36.             top: 0;
  37.         }
  39.         .b {
  40.             width: 200px;
  41.             height: 100px;
  42.             bottom: 0;
  43.         }
  44.     </style>
  46. <body>
  47. <div id="app">
  48.     <div class="box" @click="clickAction">
  49.         <div class="b1" :class="c1"></div>
  50.         <div class="b2" :class="c2"></div>
  51.     </div>
  52. </div>
  54. <script src="js/vue.js"></script>
  55. <script>
  56.     let app = new Vue({
  57.         el: '#app',
  58.         data: {
  59.             count: 1,
  60.             c1: 'l',
  61.             c2: 'r',
  62.             c1Arr: ['l', 't', 'r', 'b'],
  63.             c2Arr: ['r', 'b', 'l', 't']
  64.         },
  65.         methods: {
  66.             clickAction() {
  67.                 let n = this.count += 1;
  68.                 this.c1 = this.c1Arr[n % 4];
  69.                 this.c2 = this.c2Arr[n % 4];
  70.             }
  71.         }
  72.     });
  73.     // 利用定时器自动旋转图像
  74.     // setInterval(function () {
  75.     //     app.clickAction();
  76.     // }, 500)
  77. </script>
  78. </body>

day65作业的更多相关文章

  1. （day65）作业

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  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. JS预解析与变量提升

    预解析 JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的.JavaScript解析器执行JavaScript代码的时候,分为两个过程:预解析过程和代码执行过程 预解析过程 ...

  2. thjinkphp 变量调试

    输出某个变量是开发过程中经常会用到的调试方法,除了使用php内置的var_dump和print_r之外,ThinkPHP框架内置了一个对浏览器友好的dump方法,用于输出变量的信息到浏览器查看. 大理 ...

  3. 组合数学——cf991E

    /* 如果有某一位,那么这一位必须存在 枚举所有情况,计算每种情况时0额外另算 */ #include<bits/stdc++.h> using namespace std; #defin ...

  4. Django项目：堡垒机(Linux服务器主机管理系统)--01--01堡垒机重写DJANGO账户表

    python相关软件安装流程图解————————python安装——————python-3.7.1-amd64 https://www.cnblogs.com/ujq3/p/10098166.htm ...

  5. QT中QString与string的转化，解决中文乱码问题

    在QT中,使用QString输出到控件进行显示时,经常会出现中文乱码,网上查了一圈,发现大部分都是针对QT4增加4条语句:</span> [cpp] view plain copy QTe ...

  6. iOS开发NSLayoutConstraint代码自动布局

    1.NSLayoutConstraint简介 适配界面大多用Masonry工具,也是基于NSLayoutConstraint写的!通过使用两个类方法实现自动布局: + (NSArray<__ki ...

  7. css3@media实现原理

    window.matchMedia() 基本用法 window.matchMedia方法用来检查CSS的mediaQuery语句.各种浏览器的最新版本(包括IE 10+)都支持该方法,对于不支持该方法 ...

  8. winform程序捕获全局异常，对错误信息写入日志并弹窗

    使用场景:在winform程序中如果没对方法进行try catch操作,若方法内出错,则整个程序报错并退出,如下图 如果程序已在客户手中,若没对错误的详细信息进行拍照,我们则不知道错误原因是什么.我们 ...

  9. 【Oracle】如何在查询视图时使用索引

    通常我们使用hint来固定查询计划选择走表的索引 固定表的连接等等,但是如果第一层查询的是视图呢? yang@rac1>CREATE TABLE TA (ID NUMBER, NAME VARC ...

  10. Java开发系列-注解

    概述 在JDK5之后提供了一个新特性,和类.接口同级.定义时使用的关键字是@interface.注解主要有三个作用,分别是编译检查.替代配置文件.定义注解(元注解).分析代码(用到反射).注解的本质就 ...