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的更多相关文章
随机推荐
- PKU_3624(0-1背包)
题目:http://poj.org/problem?id=3624 分析:这是一个0-1背包的问题. #include<stdio.h>#include<string.h>in ...
- [POI2017]Sabota【观察+树形Dp】
Online Judge:Bzoj4726 Label:观察,树形Dp,水题 题目描述 某个公司有n个人, 上下级关系构成了一个有根树.公司中出了个叛徒(这个人不知道是谁). 对于一个人, 如果他下属 ...
- 已发布的jsp项目如何在本地展示
已发布的项目可以放到tomcat 安装目录下的webapps/下面,但是有时候我们的目录已经放好了,所在要加映射过去. 1, 到tomcat/conf/下,打开server.xml 2, 找到 < ...
- 【codeforces 500D】New Year Santa Network
[题目链接]:http://codeforces.com/problemset/problem/500/D [题意] 有n个节点构成一棵树; 让你随机地选取3个不同的点a,b,c; 然后计算dis(a ...
- MyBatis配置文件(三)－－typeAliases别名
因为类的全限定名一般包括包名,显得很长,在使用过程中不是很方便,所以MyBatis中允许我们使用一种简写的方式来代替全限定名,这就是别名.这就相当于我们在玩微信的时候,有些人的昵称很长很难记,怎么办? ...
- Zookeeper教程
由于zookeeper使用java语言编写,因此我们运行zookeeper需要保证你的服务器上已经安装了jdk. 安装zk 本文介绍的前提是已经默认安装好了jdk,Linux安装JDK教程https: ...
- css3之 渐变
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和 ...
- Leetcode153. Find Minimum in Rotated Sorted Array寻找旋转排序数组中最小值
假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 请找出其中最小的元素. 你可以假设数组中不存在重 ...
- mongodb 使用常见问题汇总（主要是集群搭建）
1 安装 请使用官方推荐的教程 https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/ 2 远程访问失败: 操作系统是u ...
- HTTP协议详解(经典)
转自:http://blog.csdn.net/gueter/archive/2007/03/08/1524447.aspx Author :Jeffrey 引言 HTTP是一个属于应用层的面向对象的 ...