Vue点击切换颜色_vue切换颜色-CSDN博客

本文链接：https://blog.csdn.net/hy3528/article/details/103288976

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
    <title>变色选择器</title>
    <style>
        .zong {
            display: flex;
            flex-direction: row;
            flex-flow: row wrap;
        }

        .button_diva {
            border-radius: 5px;
            background-color: blue;
            padding: 0.5rem;
            width: auto;
            margin: 0.5rem;
            color: #fff;
        }

        .avtiv {
            background-color: #000;
        }
    </style>
</head>

<body>
    <div id="Vue">
        <div class="zong">
            <div class="button_diva" :class="item.index == status ? 'avtiv':''" v-for="(item,index) in sites" :key="index"
                @click="bintap(item,index)">
                <p>{{item.name}}</p>
            </div>
        </div>

        <div>
            {{name}}
        </div>
    </div>

</body>
<script>
    new Vue({
        el: "#Vue",
        data: {
            status: 0,
            sites: [
                {
                    name: 'Runoob',
                    index:0
                },
                {
                    name: 'Google',
                    index:1
                },
                {
                    name: 'Taobao',
                    index:2
                },
                {
                    name: 'zhoayun',
                    index:3
                }
            ],
            name: 123
        },
        methods: {
            bintap(item,index) {
                console.log(item.index)
                this.status = item.index
                if (item.index == 0) {
                    this.name = 123
                } else if (item.index == 1) {
                    this.name = 511
                } else if (item.index == 2) {
                    this.name = 456
                }else if (item.index == 3) {
                    this.name = 789
                }
            }
        },
        created() {

        }
    })
</script>
<script>
    $(document).ready(function () {

    });
</script>

</html>