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的更多相关文章
随机推荐
- <每日一题>题目28：简单的python练习题(51-60)
#51.一行代码实现1-100的和 sum(range(1,101)) #52.如何在一个函数内部修改全局变量 ''' 利用global ''' #53.字典如何删除和合并2个字典 ''' del d ...
- springboot4.1.1的log4j2配置
一.默认情况下,Spring Boot会用Logback来记录日志,并用INFO级别输出到控制台: 日志输出内容元素具体如下: 时间日期:精确到毫秒 日志级别:ERROR, WARN, INFO, D ...
- Solr+HBase
- HBase Ganglia
- [转]WPF焦点概述
WPF 中,有两个与焦点有关的主要概念:键盘焦点和逻辑焦点. 键盘焦点指接收键盘输入的元素,而逻辑焦点指焦点范围中具有焦点的元素. 本概述将详细介绍这些概念. 理解这些概念之间的区别对于创建具有可以获 ...
- BZOJ 3236 AHOI 2013 作业 莫队+树状数组
BZOJ 3236 AHOI 2013 作业 内存限制:512 MiB 时间限制:10000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目大意: 此时己是凌晨两点,刚刚做了Co ...
- linux服务器项目搭建常用命令
linux下载链接文件 wget -c 后面是该网络地址和文件的位置. 例如:wget -c http://apache.opncas.or/MySQL/MySQL-7/v7.0.67/bin/MyS ...
- Composer安装Yii2以及相关扩展
1.安装redis扩展 命令:composer require yiisoft/yii2-redis Git地址:https://github.com/yiisoft/yii2-redis/blob/ ...
- 切片 及 range 点睛回炉
print(list(range(-1,-5,-1))) # [-1, -2, -3, -4] # range(x,y,z) ''' 首先把 x的数值放在 数轴上 z 的正负决定 x 向前搜索(为正) ...
- String、StringBuffer和StringBuilder源码解析
1.String 1.1类的定义 public final class String implements java.io.Serializable, Comparable<String> ...