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的更多相关文章
随机推荐
- Ubuntu中使用Nginx+rtmp搭建流媒体直播服务
一.背景 本篇文章是继上一篇文章<Ubuntu中使用Nginx+rtmp模块搭建流媒体视频点播服务>文章而写,在上一篇文章中我们搭建了一个点播服务器,在此基础上我们再搭建一个直播服务器, ...
- 05-3-style标签属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap-select 插件示例
本文原创地址:http://www.cnblogs.com/landeanfen/p/7457283.html 一.组件开源地址以及API说明 bootstrap-select开源地址:https ...
- jqGrid的subGrid子表格
使用完整jqGrid作为子表格 使用子表格,涉及到jqGrid的三个选项: subGrid :首先必须将jqGrid的subGrid选项设置为true,默认为false:当此项设为true的时候,Gr ...
- 解决使用mybatis模糊查询为空的问题
解决方法: 在数据库配置的url后添加?useUnicode=true&characterEncoding=utf-8 参考: https://blog.csdn.net/IT_private ...
- vue 学习 一
1.实例: var vm = new Vue({ el: '#example', data: { a:1 }, created: function () { // `this` 指向 vm 实例 co ...
- MyBatis配置文件(一)――properties属性
MyBatis配置文件中有很多配置项,这些配置项分别代表什么,有什么作用,需要理一下了.先通过下面这个例子来看都有哪些配置项 <?xml version="1.0" enco ...
- WIN10 Internet协议版本tcp/ipv4属性灰色没有法点击
问题图如下: 1.右键打开“计算机”点击菜单,选中“管理”: 2.进入计算机管理后,打开“设备管理器”,然后在右侧打开点击“网络适配器”,如果有驱动的话,在驱动上右键点击菜单,选中卸载: 3.卸载网卡 ...
- Python基础---控制执行流程
一.if语句 1.if语句 作用:让程序根据条件选择性地执行某条语句或某些语句 说明:if语句又叫条件语句,也叫分支语句 语法: if 真值表达式1: 语句块1 elif 真值表达式2: 语句块2 . ...
- JMETER的三个线程组
JMETER的三个线程组 Jmeter有三个线程组分类:Thread Group(线程组).setUp Thread Group.tearDown Thread Group,如下图所示: (1).th ...