两个半圆,点一下转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的更多相关文章

随机推荐

  1. Ubuntu中使用Nginx+rtmp搭建流媒体直播服务

    一.背景 本篇文章是继上一篇文章<Ubuntu中使用Nginx+rtmp模块搭建流媒体视频点播服务>文章而写,在上一篇文章中我们搭建了一个点播服务器,在此基础上我们再搭建一个直播服务器, ...

  2. 05-3-style标签属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. bootstrap-select 插件示例

      本文原创地址:http://www.cnblogs.com/landeanfen/p/7457283.html 一.组件开源地址以及API说明 bootstrap-select开源地址:https ...

  4. jqGrid的subGrid子表格

    使用完整jqGrid作为子表格 使用子表格,涉及到jqGrid的三个选项: subGrid :首先必须将jqGrid的subGrid选项设置为true,默认为false:当此项设为true的时候,Gr ...

  5. 解决使用mybatis模糊查询为空的问题

    解决方法: 在数据库配置的url后添加?useUnicode=true&characterEncoding=utf-8 参考: https://blog.csdn.net/IT_private ...

  6. vue 学习 一

    1.实例: var vm = new Vue({ el: '#example', data: { a:1 }, created: function () { // `this` 指向 vm 实例 co ...

  7. MyBatis配置文件(一)――properties属性

    MyBatis配置文件中有很多配置项,这些配置项分别代表什么,有什么作用,需要理一下了.先通过下面这个例子来看都有哪些配置项 <?xml version="1.0" enco ...

  8. WIN10 Internet协议版本tcp/ipv4属性灰色没有法点击

    问题图如下: 1.右键打开“计算机”点击菜单,选中“管理”: 2.进入计算机管理后,打开“设备管理器”,然后在右侧打开点击“网络适配器”,如果有驱动的话,在驱动上右键点击菜单,选中卸载: 3.卸载网卡 ...

  9. Python基础---控制执行流程

    一.if语句 1.if语句 作用:让程序根据条件选择性地执行某条语句或某些语句 说明:if语句又叫条件语句,也叫分支语句 语法: if 真值表达式1: 语句块1 elif 真值表达式2: 语句块2 . ...

  10. JMETER的三个线程组

    JMETER的三个线程组 Jmeter有三个线程组分类:Thread Group(线程组).setUp Thread Group.tearDown Thread Group,如下图所示: (1).th ...