homeworkvue
两个半圆,点一下转90°,两个颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap {
border:3px solid black;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin: 50px auto 0;
position: relative;
background-color: green;
}
.red {
width: 100px;
height: 200px;
position: absolute;
background-color: red;
}
.l {
width: 100px;
height: 200px;
left: 0;
}
.t {
width: 200px;
height: 100px;
top: 0;
}
.r {
width: 100px;
height: 200px;
right: 0;
}
.b {
width: 200px;
height: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap" @click="change" >
<div class="red" :class="red_class" ></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#app",
data : {
count : 0 ,
red_class:'l',
red_arr :['l','t','r','b']
},
methods:{
change(){
this.count ++;
this.red_class=this.red_arr[this.count %4]
}
},
})
</script>
</html>
homeworkvue的更多相关文章
随机推荐
- Windows API 第19篇 FindFirstVolumeMountPoint FindNextVolumeMountPoint
相关函数:HANDLE FindFirstVolumeMountPoint( ...
- virtualbox 启动虚拟机提示Cannot load R0 module
Cannot load R0 module C:\Program Files\Oracle\VirtualBox/VBoxDDR0.r0: SUPR3LoadModule: supLoadModule ...
- Istio流量管理实践之(3): 基于Istio实现流量对比分析
流量镜像 流量镜像,也称为影子流量,流量镜像提供一种尽可能低的风险为生产带来变化的强大功能.镜像会将实时流量的副本发送到镜像服务.镜像流量发生在主服务的关键请求路径之外. 在非生产或者测试环境中,尝试 ...
- HZOI20190810 T1
A:blue(青蛙乱跳) 好像很多人都是用的队列?甚至还有用set 然而...博主太蒻了,只能找一个sb的规律 我们来手模一个样例: 10 9 16 30 2 4 6 9 11 15 18 19 25 ...
- LUOGU P3960 列队 (noip2017 day2T3)
传送门 解题思路 记得当时考试我还是个孩子,啥也不会QAQ.现在回头写,用动态开点的线段树,在每行和最后一列开线段树,然后对于每次询问,把x行y列的删去,然后再把x行m列的元素加入x行这个线段树,然后 ...
- php表单 - 验证邮件和URL
PHP - 验证名称 以下代码将通过简单的方式来检测 name 字段是否包含字母和空格,如果 name 字段值不合法,将输出错误信息: $name = test_input($_POST[" ...
- myeclipse 配置svn
方法三:直接解压下载SVN插件:site-1.6.10.zip解压后将其全部文件拷贝至:D:\Program Files\Genuitec\MyEclipse 8.5\dropins(MyEclips ...
- spring cloud深入学习(十一)-----服务网关zuul
前面的文章我们介绍了,Eureka用于服务的注册于发现,Feign支持服务的调用以及均衡负载,Hystrix处理服务的熔断防止故障扩散,Spring Cloud Config服务集群配置中心,似乎一个 ...
- 基于阿里云安装脚本扩展 之 自动安装mongodb及php扩展
好久没有发布文章了,有点跟不上当初这个博客的初衷.为了使自己的博客更新不半途而废,今天特意再写了一个自动安装脚本,一样是基于阿里云的服务端安装脚本进行的扩展.闲话不说,直接放代码: #!/bin/ba ...
- 转：步步LINUX C--进程间通信（二）信号
源地址:http://blog.csdn.net/jmy5945hh/article/details/7529651 linux间进程通信的方法在前一篇文章中已有详细介绍.http://blog.cs ...