动态类名-数组方式-导航

朱雀 2022-09-16 06:05 103阅读 0赞

注意：代码所需vue可以通过npm i vue --save下载，然后引入即可

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./node_modules/vue/dist/vue.js"></script>
        <style>
            .red {
                background: red;
            }
    
            .orange {
                background: orange;
            }
    
            .yellow {
                background: yellow;
            }
    
            .green {
                background: green;
            }
    
            .lime {
                color: lime;
            }
    
            .blue {
                color: blue;
            }
    
            .purple {
                color: purple;
            }
            .course{
                overflow: hidden;
            }
            .every{
                width: 200px;
                height: 200px;
                border: 1px solid blue;
                float: left;
                margin: 10px;
            }
            .area{
                overflow: hidden;
            }
            .every-area{
                float: left;
                padding: 10px 20px;
                margin: 20px;
                background: #ccc;
                border-radius: 5px;
                cursor: pointer;
            }
            .active{
                background: #ff4400;
                color: #fff;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
           
            
            <h3>当前选中的地区是：{
       {area[n].name}}</h3>
            <div class="area">
                
                <div class="every-area" v-for="(item,index) in area" :class="[index==n?'active':'']" @click="n=index">{
       {item.name}}</div>
            </div>
    
            
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                   
                    // 初始化n
                    n:0,
                    //地区
                    area:[
                        {
                            name:"北京",
                            id:1
                        },
                        {
                            name:"上海",
                            id:2
                        },
                        {
                            name:"天津",
                            id:3
                        },
                        {
                            name:"广东",
                            id:4
                        }
                    ]
                },
            })
        </script>
    </body>
    
    </html>

效果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/b367f0b178d645e0a5fa87000f583e75.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/bc5a54235a174a23b2cfebed3374062f.png