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的更多相关文章
随机推荐
- VRRP概述-转
本文介绍了VRRP的基本原理.特点和应用. VRRP概述 随着Internet的发展,人们对网络的可靠性的要求越来越高.对于局域网用户来说,能够时刻与外部网络保持联系是非常重要的. 通常情况下,内部网 ...
- AIO异步非阻塞学习
Client:客户端 package aio; import java.io.UnsupportedEncodingException; import java.net.InetSocketAddre ...
- Spring Boot 集成Jsp与生产环境部署
一.简介 提起Java不得不说的一个开发场景就是Web开发,也是Java最热门的开发场景之一,说到Web开发绕不开的一个技术就是JSP,因为目前市面上仍有很多的公司在使用JSP,所以本文就来介绍一下S ...
- JZOJ5883【NOIP2018模拟A组9.25】到不了——动态LCA裸题
题目描述 Description wy 和 wjk 是好朋友. 今天他们在一起聊天,突然聊到了以前一起唱过的<到不了>. "说到到不了,我给你讲一个故事吧." &quo ...
- 阿里云 Aliplayer高级功能介绍(八)：安全播放
基本介绍 如何保障视频内容的安全,不被盗链.非法下载和传播,阿里云视频点播已经有一套完善的机制保障视频的安全播放: 更多详细内容查看点播内容安全播放,H5的Aliplayer对于上面的安全机制都是支持 ...
- php filemtime filectime fileatime的区别
1.fileatime()int fileatime(string filename):fileatime()函数返回filename最后访问的时间,这里的最后访问是指每当一个文件的数据块被读取,采用 ...
- struts1 总结吧
以前都是使用struts2,但是新公司要使用struts1,所有只有硬着头皮上了. 一.Dynamic Method Invoc : 自定义的 Action 必须继承 DispatchAction 而 ...
- jeecms各种标签类（大部分，并没有包含一些其他的如text_cut html_cut之类）
软件包 comjeecms.cms.action.directive 类摘要 ChannelDirective 栏目对象标签 ChannelListDirective 栏目列表标签 ChannelPa ...
- STL中的unique（）和lower_bound ,upper_bound
unique(): 作用:unique()的作用是去掉容器中相邻元素的重复元素(数组可以是无序的,比如数组可以不是按从小到大或者从大到小的排列方式) 使用方法:unique(初始地址,末地址): 这里 ...
- java 实现文件内容的加密和解密
package com.umapp.test; import java.io.FileInputStream; import java.io.FileOutputStream; import java ...