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的更多相关文章
随机推荐
- Sql Server 2005主机和镜像切换SQL语句
--1.主备互换 --主机执行: USE master; ALTER DATABASE <DatabaseName> SET PARTNER FAILOVER; --2.主服务器Down掉 ...
- 小程序 设置tabBar选中颜色和图标
"tabBar": { "selectedColor": "#4da9ff", //颜色 "list": [{ &quo ...
- 很好用的API管理--Swagger
1.打开NuGet程序包 2.安装下面两个程序包 3.安装完后会出现SwaggerConfig.cs类,并修改里面的内容 代码: [assembly: PreApplicationStartMetho ...
- 路飞学城-Python爬虫集训-第二章
本次爬虫集训的第二次作业是web微信. 先贴一下任务: 作业中使用到了Flask. Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模 ...
- Quota- Linux必学的60个命令
1.作用 quota命令用来显示磁盘使用情况和限制情况,使用权限超级用户. 2.格式 quota [-g][-u][-v][-p] 用户名 组名 3.参数 -g:显示用户所在组的磁盘使用限制. -u: ...
- 微信小程序--导航跟随
最近开发小程序的时候遇到这样一个需求:如图1 页面向下滚动到白色导航的位置时,白色导航固定到页面最上方:当页面向上滚动到白色导航时,白色导航恢复到原始位置:点击各个导航,平滑的跳到相应位置. 思路1: ...
- 分享非常漂亮的WPF界面框架源码及插件化实现原理
在上文<分享一个非常漂亮的WPF界面框架>中我简单的介绍了一个界面框架,有朋友已经指出了,这个界面框架是基于ModernUI来实现的,在该文我将分享所有的源码,并详细描述如何基于Mod ...
- JS中apply和call的联系和区别
以下内容翻译自stackoverflow 链接: http://stackoverflow.com/questions/7238962/function-apply-not-using-thisarg ...
- map 的使用 UVA156
借用这一水题来熟悉map的操作,以前以为看过c++ primer,对map虽然不熟悉但用还是会用的,实际上手发现不是那么回事,还是有很多坑的 #include <iostream> #in ...
- 01Redis入门指南笔记(简介、安装、配置)
一:简介 Redis是一个开源的高性能key-value数据库.Redis是Remote DIctionary Server(远程字典服务器)的缩写,它以字典结构存储数据,并允许其他应用通过TCP协议 ...