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>