作业

1 第一题

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

</head>
<body>
<div id="c1" v-bind:style="divStyle"></div>
<br>
<br>
<br>

<input  id="select1" type="button" v-bind:style="button" v-on:click="inputClick">
<input  id="select2" type="button" v-bind:style="button" v-on:click="inputClick">
<input  id="select3" type="button" v-bind:style="button" v-on:click="inputClick">

</body>

<script>
    var c1 = new Vue({
        el: '#c1',
        data: {
            divStyle: {
                width: "200px",
                height: "200px",
                backgroundColor: "red"
            }
        }
    });
    for (let i = 1; i < 4; i++) {
        let color = ['red', 'yellow', 'blue'];
        new Vue({
        el: '#select' + i,
        data: {
            button: {
                backgroundColor: color[i-1],
            },
        },
        methods: {
            inputClick() {
                c1.divStyle.backgroundColor = this.button.backgroundColor;
            }
        }
    });
    }
</script>
</html>

2 第二题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="wrap" :style="wrapStyle" v-on:click="wrapClick" :model="count"></div>

<script>
    let wrap = new Vue({
        el:'#wrap',
        data:{
            count:0,
            wrapStyle:{
                width:"200px",
                height:"200px",
                backgroundColor:"",
                border:"dotted 1px black"
            },
        },
        methods:{
            wrapClick() {
                color = {"0":"pink","1":"green","2":"cyan"};
                this.count += 1;
                this.count %= 3;
                this.wrapStyle.backgroundColor = color[this.count-1]
            }
        },

    });
</script>
</body>
</html>
posted @ 2019-12-17 08:42  W文敏W  阅读(78)  评论(0)    收藏  举报