vue点击切换同级类名,点击切换类名

同级切换类名

代码:

<ul>
    <li v-for="(item,index) in items" :key="item.id" :class="{active:id==index}"
        @click="clickSwitch(index)">
        {{ item.title }}
    </li>
</ul>

js:

 data() {
        return {
            id: 0,
        };
    },
    methods: {
        clickSwitch(index) {
            this.id = index;
        },
   }

 

点击添加删除类名 

代码:

<div :class="{'active':isCloned}" @click="togglePay">点击切换样式</div>

js:

 data() {
        return {
            isCloned: false,
        };
    },
    methods: {
        togglePay() {
            this.isCloned = !this.isCloned;
        }
    }

 

posted @ 2021-04-29 16:26  馬騳驫驷  阅读(927)  评论(0)    收藏  举报