vue.js怎么切换改变颜色

本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。

vue.js切换改变颜色的方法:

<!DOCTYPE html>
<html>
<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>
            <div :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>

以上就是vue.js怎么切换改变颜色的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读