【最新亲测】vue.js 实现点击后动态添加class及删除同级class

本文链接：https://blog.csdn.net/k8080880/article/details/126067143

本来想偷个懒，想直接从百度搜索复制粘贴，结果发现搜索出来的结果全部是某一篇文章，从第一页到第10页都是，大量重复泛滥滥竽充数。这文章不仅代码不全、不严谨、甚至还有几处bug，其中大量拷贝的网页布局混乱，不忍直视...马德，百度是越来越不行了，越来越稀烂了，估计觉得自己是行业龙头成绩好，心思根本没有花在其本业上，注意力放在搞钱和其它虚头巴脑的东西去了...

推荐大家以后用bing.com 吧，尤其是搜索技术类的文章，比百度强太多。。。

好了，进入主题，贴代码：

html代码片段：

   <div   v-for="(item,index) in menu" @click="menuClick(item,index)"  v-bind:class="{side_box_active:index==isActive}"     class="side-box" >
            <a :href="item.link" :target="item.target" >
                <div class="btnBox btnBoxBg">
                    <li class="icon   iconfont " :class="item.icon"></li>
                    <p>{{item.name}}</p>
                </div>
            </a>
        </div>

js脚本代码片段：

data:function() {
            return {
                isActive:false,
                menu:[
                    {name:"主页",icon:"icon-shouye",link:"main.php",target:"main"},
                    {name:"床位",icon:"icon-chuang",link:"bedList.php",target:"main"},
                    {name:"病人",icon:"icon-haoyou",link:"patientList.php",target:"main"},
                    {name:"医嘱",icon:"icon-yizhufuzhu",link:"adviceList.php",target:"main"},
                    {name:"医护",icon:"icon-nurse",link:"sadmin_list.php",target:"main"},
                    {name:"排班",icon:"icon-leftfont-34",link:"sectionPlan.php",target:"main"},
                    {name:"综合",icon:"icon-zonghe1",link:"overall.php",target:"main"},
                    {name:"帮助",icon:"icon-bangzhu2",link:"javascript:;",target:""},
                ]
            }

        }
        ,methods:{
            menuClick(item,index){
                this.isActive = index;
            }

        }

重点一：