Vue --- basic training

1. Red, yellow, and blue buttons, and a rectangular box, clicking different buttons, the color of the rectangular frame may be switched to a specified color

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>点击变色</title>

    <script src="Vue/vue.js"></script>

    <style>
        .d1{
            width: 150px;
            height: 150px;
            background-color: red;
        }
        .d2{
            width: 150px;
            height: 150px;
            background-color: blue;
        }
        .d3{
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>
<body>

<div id="d0">
    <p @click="f1" id="d1">红色</p>
    <p @click="f2" id="d2">蓝色</p>
    <p @click="f3" id="d3">黄色</p>
</div>

<div id="d4" :class="c1" >

</div>

<script>

    let app = new Vue({
        el:'#d4',
        data:{
            c1:'d1',
        },
    });

    let color = new Vue({
        el:'#d0',
        data:{
            d1:'d1',
            d2:'d2',
            d3:'d3'
        },
        methods:{
            f1(){
            app.c1 = 'd1'
        },
            f2(){
            app.c1 = 'd2'
        },
            f3(){
            app.c1 = 'd3'
        },
        }
    })
</script>
</body>
</html>

2. There is a rectangular box, click on the box itself, record clicks, clicks will increase sequentially change color

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>点击变色</title>
    <script src="Vue/vue.js"></script>

    <style>
        .d1{
            width: 150px;
            height: 150px;
            background-color: red;
        }
        .d2{
            width: 150px;
            height: 150px;
            background-color: blue;
        }
        .d3{
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
    </style>

</head>
<body>

<div>
    <p id="d1">{{ count }}</p>
</div>

<div :class="c1" id="d2" @click="f2" id="d2"></div>

<script>
    let app = new Vue({
        el:'#d1',
        data:{
            cl:'d1',
            c2:'d2',
            c3:'d3',
            count:1
        },
    });

    let app1 = new Vue({
        el:'#d2',
        data:{
            c1:'d1',
            count1:0
        },
        methods:{
            f2(){
                app.count = app.count + 1;

                if(app.count == 3){
                    app1.c1='d2'
                }
                if(app.count == 5){
                        app1.c1 = 'd3'
                }
                if(app.count == 7){
                        app1.c1 = 'd1';
                        app.count = 1
                    }
                }
            }
        })

</script>

</body>
</html>

Vue --- basic training

Guess you like