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的更多相关文章
随机推荐
- RQNOJ--160 竞赛真理（01背包）
题目http://www.rqnoj.cn/problem/160 分析:这是一个01背包问题,对于每一道题目,都有两个选择"做"或者"不做". 但是唯一不同的 ...
- Redis高级命令的使用学习
- 数据库连接客户端 dbeaver 程序包以及使用说明
dbeaver 是一个基于 Eclipse 的数据库客户端,支持几乎所有常见的数据库.分为商业版和社区版,社区版可以免费使用. 官网和 GitHub https://dbeaver.io/ https ...
- LUOGU P3178 [HAOI2015]树上操作
传送门 解题思路 树链剖分裸题,线段树维护. 代码 #include<iostream> #include<cstdio> #include<cstring> #d ...
- Coursera ML笔记 - 神经网络（Representation）
前言 机器学习栏目记录我在学习Machine Learning过程的一些心得笔记,涵盖线性回归.逻辑回归.Softmax回归.神经网络和SVM等等,主要学习资料来自Standford Andrew N ...
- css 实现单行以及多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号大家都知道用text-overflow:ellipsis属性来,当然还需要加上宽度width属性. 实现方法: ``` overflow: hidden; text-o ...
- 19-10-18-Night-U
话说T3: 一句话题意……见过这个嘛…… 于是:$\sum \limits_{i!=j} \binom{a_i+b_i+a_j+b_j}{a_i+a_j}$ ------------前言结束----- ...
- Android SDK 开发指南
Android SDK 开发指南 视频详解 以下视频是对融云 Android SDK 开发使用的详细讲解,您可以在阅读文档时配合学习. 更多视频教程如下: CSDN 融云 Android SDK ...
- Maven实战错误笔记：使用mvn archetype:generate报错：Unable to add module to the current project as it is not of packaging type 'pom'
在使用mvn archetype:generate生成Maven实战03:HelloWorld中的HelloWorld的项目骨架时报了这个错,从字面上分析是可能与pom.xml文件有关,然后我看了一下 ...
- Eureka注册中心增加权限认证
在Spring Cloud通过Eureka实现服务注册与发现时,默认提供web管理界面,但是如果在生产环境暴露出来,会存在安全问题.为了解决这个问题,我们可以通过添加权限认证进行控制,具体步骤如下: ...