首页 > 其他 > 详细

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

时间:2021-04-29 18:12:53      阅读:13      评论:0      收藏:0      [点我收藏+]

同级切换类名

代码:

<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;
        }
    }

技术分享图片

技术分享图片

 

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

原文:https://www.cnblogs.com/jiekemaya/p/14718512.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!