1216 作业

作业

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }

    </style>
</head>
<body>
<div id="app">
    <p class="box" :style="{backgroundColor: bgc}"></p>

    <input type="button" value="红" @click="c_red">
    <input type="button" value="黄" @click="c_ye">
    <input type="button" value="蓝" @click="c_bl">
</div>
</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            bgc:'white'
        },
        methods:{
            c_red(){
                this.bgc = 'red'
            },
            c_ye(){
                this.bgc = 'yellow'
            },
            c_bl(){
                this.bgc = 'blue'
            },
        }
    })

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap {
            width: 200px;
            height: 200px;
            background-color: red;
        }

    </style>
</head>
<body>
<div id="app">
    <div id="wrap" :style="{backgroundColor: bgc}" @click="change_c"></div>
    <span>{{ count }}</span>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            bgc:'blank',
            count:0,
            colorArr:['pink','green','cyan']
        },
        methods:{
            change_c(){
                let n = this.count++;
                this.bgc = this.colorArr[n % this.colorArr.length]
            }
        }
    })
</script>
</html>

img

posted @ 2019-12-16 23:10  fwzzz  阅读(121)  评论(0)  编辑  收藏  举报