The magic dynamic button of vue

Today we will use the condition instruction of vue to complete a simple dynamic color change function button

 

First of all, we still need to configure vue. In the last essay, there is related download teaching

Then we need to build three simple buttons on the html page. The colors are purple, green and blue (the color is optional). The codes are as follows:

<body>
<div id="app">
    <p>
        <button @click="btn_click('pg1')"  :style="{background:'rebeccapurple'}">purple</button>
        <button @click="btn_click('pg2')" :style="{background:'yellowgreen'}">green</button>
        <button @click="btn_click('pg3')" :style="{background:'cornflowerblue'}">blue</button>
    </p>
</div>
</body>

The @ here is the v-on event command, where you need to set the click event on three buttons

Next, we need to judge the conditional instruction. The code is as follows:

        <div class="box pg1" v-if="pg == 'pg1'" key="pg1"></div>
        <div class="box pg2" v-else-if="pg == 'pg2'" key="pg2"></div>
        <div class="box pg3" v-else key="pg3"></div>

Judge different effects of clicking different buttons by conditions

Next, we will do mount point, event rendering and provide implementation operation for the event

<script>
    new Vue({
        el: '#app',
        data: {
            pg: 'pg1'
        },
        methods: {
            btn_click: function (pg_num) {
                this.pg = pg_num
            }
        }
    })
</script>

Here, we set the picture displayed by the first button by default after entering the page, and click to complete the event conversion

Finally, set up the picture

    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: darkgray;
        }
        .pg1 { background-color: rebeccapurple; }
        .pg2 { background-color: yellowgreen; }
        .pg3 { background-color: cornflowerblue; }
    </style>

Of course, you can also choose your favorite pictures to place. Here we just place the color filled box

The specific implementation effect is as follows:

Get different pictures through different clicks!

The overall code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: darkgray;
        }
        .pg1 { background-color: rebeccapurple; }
        .pg2 { background-color: yellowgreen; }
        .pg3 { background-color: cornflowerblue; }
    </style>
</head>
<body>
<div id="app">
    <p v-if="is_if" key="my_if">v-if Display and hide of</p>
    <p v-show="is_show" key="my_show">v-show Display and hide of</p>
    <p>
        <button @click="btn_click('pg1')"  :style="{background:'rebeccapurple'}">purple</button>
        <button @click="btn_click('pg2')" :style="{background:'yellowgreen'}">green</button>
        <button @click="btn_click('pg3')" :style="{background:'cornflowerblue'}">blue</button>
        <div class="box pg1" v-if="pg == 'pg1'" key="pg1"></div>
        <div class="box pg2" v-else-if="pg == 'pg2'" key="pg2"></div>
        <div class="box pg3" v-else key="pg3"></div>
    </p>
</div>

</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            is_if: false,
            is_show: true,
            pg: 'pg1'
        },
        methods: {
            btn_click: function (pg_num) {
                this.pg = pg_num
            }
        }
    })
</script>
</html>

 

This is the magic dynamic Vue button

Tags: Javascript Vue

Posted on Sun, 10 Nov 2019 10:41:03 -0500 by kevisazombie