vue動態修改css樣式:class

在vue中使用:class屬性動態修改樣式

<template>
    <view>
        
        
        <!-- 小菜單列表輪播 -->
        <view>
            <swiper class="swiper" :autoplay="false" @change="changeFun">
                <block v-for="(item,index) in menuSwiper" :key="index" >
                    <swiper-item>
                        <view class="swiper-item">
                            <block v-for="(menu, index) in item" :key="index" >
                                <view class="menu-cont">
                                    <image :src="menu.url" mode="widthFix"
                                     ></image>
                                    <text>{{menu.name}}</text>
                                </view>
                            </block>
                            
                        </view>
                    </swiper-item>
                </block>
                <!-- <swiper-item>
                    <view class="swiper-item uni-bg-green">B</view>
                </swiper-item> -->
            </swiper>
            
            <view class="instruct-view">
                <block v-for="(item, index) in instructData" :key="index">
                    <view class="instruct" :class="[index == num ? 'activeclass':'instruct']" ></view>
                </block>
                
            </view>
        </view>
        
        
    </view>
    
    
    
</template>

<script>
    export default {
        
        data() {
            return {
                instructData: ['', ''],
                num: 0,
                
                menuSwiper: [{}], //初始化一個二維數組
                menuList:[
                    {
                        url: "../../../static/images/tabbar/home-selected.png",
                        name: "美食"
                    },
                    {
                        url: "../../../static/images/tabbar/home-selected.png",
                        name: "城市便利"
                    },
                    {
                        url: "../../../static/images/tabbar/home-selected.png",
                        name: "美團專送"
                    },
                    {
                        url: "../../../static/images/tabbar/home-selected.png",
                        name: "跑腿代購"
                    },
                    {
                        url: "../../../static/images/tabbar/home-selected.png",
                        name: "美食"
                    },
                    {
                        url: "../../../static/images/tabbar/home-selected.png",
                        name: "城市便利"
                    },
                    {
                        url: "../../../static/images/tabbar/home-selected.png",
                        name: "美團專送"
                    },
                    {
                        url: "../../../static/images/tabbar/home-selected.png",
                        name: "跑腿代購"
                    },
                ],
            }
        },
        onLoad() {

        },
        mounted() {
            // console.log("0");
            this.createMenuList();
            
        },
        methods: {
            createMenuList(){
                this.menuSwiper = new Array(2);
                this.menuSwiper[0] = this.menuList;
                this.menuSwiper[1] = this.menuList;
                
                // console.log(this.menuSwiper);
　　　　　　　　　

　　　　　　　　　　//小長方灰亮的總個數 = 滑動菜單的頁數
　　　　　　　　　　this.instructData.length = this.menuSwiper.length;

            },
            
            //滑塊變動事件
            changeFun(e){
                console.log(e.detail.current);
                this.num = e.detail.current;
            }
        }
    }    
</script>

<style scoped>/**菜單輪播*/
    swiper {
        height: 320upx !important;
    }
    
    .swiper-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;/**上下間距居中*/
        /* justify-content: space-between; *//**左右間距自動相等排列*/
        height: 320upx;
    }
    
    .menu-cont {
        /* width: calc((100% / 5) -12px) !important;
        margin: 6px;
        position: relative;
        text-align: center; */
        /* width: 140upx; */
        width: calc((100% / 5) ) !important;
        text-align: center;
    }
    
    .menu-cont image {
        width: 70upx;
        height: 70upx;
        border-radius: 50upx;
        display: block;
        margin: 0 auto;
    }
    
    .menu-cont text{
        padding-top: 20upx;
        font-size: 25upx;
    }
    
    /**菜單輪播下的小長方亮塊*/
    .instruct-view{
        display: flex; /**此div里的元素排成一排*/
        justify-content: center; /**並居中顯示*/
    }
    .instruct{
        width: 30upx;
        height: 10upx;
        background: #e6e6e6;
        margin: 0 10upx;
        border-radius: 50upx;
    }
    .activeclass{
        background: #fbae22 !important;
    }
    
</style>

 

 

代碼結果：滑動菜單列表，下面灰色的小長方塊會跟着變亮背景色

 

 

主要代碼：view中:class屬性的使用

<view class="instruct-view">
                <block v-for="(item, index) in instructData" :key="index">
                    <view class="instruct" :class="[index == num ? 'activeclass':'instruct']" ></view>
                </block>
                
            </view>

 

 

 

 

 

。