1、修改上述代码，使得点击三个不同button，显示不同的颜色 2、修改代码，点击三个button显示不同的图片（图片自找） 3、修改三个button为一个button，点击一次显示红色，两次黄色，三次绿色

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>作业二</title>
    <style>
        .back {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>
            <button>红</button>
            <button>黄</button>
            <button>绿</button>
        </p>
        <div class="back" :style="{backgroundColor: color}"></div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            color: 'red'
        },
        methods: {

        }
    })
</script>
</html>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

Go 旅城通票 2020-10-07 15:22

关注

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>作业二</title>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <style>
        .back {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>
            <button v-on:click="changecolor" data-color="red">红</button>
            <button v-on:click="changecolor" data-color="yellow">黄</button>
            <button v-on:click="changecolor" data-color="green">绿</button>
        </p>
        <p>
            <button v-on:click="changecolor1" data-color="red">单个按钮控制颜色</button>
        </p>
        <div class="back" :style="{backgroundColor: color}"></div>
        <p>
            <button v-on:click="changecsrc" data-src="showbo">showbo</button>
            <button v-on:click="changecsrc" data-src="caozhy">caozhy</button>
            <button v-on:click="changecsrc" data-src="weixin_51294385">weixin_51294385</button>
        </p>
        <img :src="src" />
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                color: 'red',
                colorIndex: 0,
                colors: ['red', 'yellow', 'green'],
                src: 'https://profile.csdnimg.cn/7/B/2/3_showbo'
            },
            methods: {
                changecolor: function (e) {
                    this.color = e.target.dataset.color;
                },
                changecsrc: function (e) {
                    this.src ='https://profile.csdnimg.cn/7/B/2/3_'+ e.target.dataset.src;
                },
                changecolor1: function (e) {
                    if (this.colorIndex >= this.colors.length - 1) this.colorIndex = 0; else this.colorIndex++;
                    this.color = this.colors[this.colorIndex];
                }
            }
        })
    </script>
</body>
</html>

本回答被题主选为最佳回答 , 对您是否有帮助呢?