如何给Vue v-for循环渲染出的元素 批量添加点击事件 及 点击后添加css类样式 及 点击后路由跳转切换
能够实现或解决的问题
给Vue v-for循环出的元素批量添加点击事件，并以自己在数组中的下标为参数给Vue v-for循环出的元素批量添加点击后激活的css类（三元运算符方式），且在点击其他同列元素的时候自动取消该类给Vue v-for循环出的元素添加 切换路由 的事件正文
刚刚学习完vue组件化概念，突然感觉使用v-for将元素循环渲染出来的方式非常省事，但如何给他们批量添加带有自己参数的点击事件却难住了我，经过度娘的一番搜索，现将大概知识整理如下。（做得潦草，不便之处多多包涵）
全篇代码如下
<template><div id="all"><div class="top"><h3>学生信息管理系统</h3><h4>欢迎 {{userName}}</h4></div><div id="app"><!--这里是重点说的部分--><div class="left"><ul><li v-for="(item,index) in funcList"@click="getfunc(index,)":class="active == index?'active':''">{{ item.name }}</li><li @click="getout()">退出登录</li></ul></div><!--上面是重点说的部分--><div class="right"><transition mode="out-in"><router-view></router-view></transition></div></div></div></template><script>export default {name: "manager",data(){return{funcList:[{name:'信息总览',com:'managerAll'},{name:'新增管理',com:'managerAdd'},{name:'删除管理',com:'managerDel'},{name:'查询功能',com:'managerSel'},{name:'修改功能',com:'managerUpdate'},{name:'关于系统',com:'managerAbout'}],// 左侧栏渲染用到的数组active:0,// 这是控制激活css类的变量userName:'Abo'// 这里是为右上角用户名预留的变量，暂时与本文无关}},methods:{getfunc(index,com){this.active = indexthis.$router.push(com)},getout(){if(confirm('确认退出吗？')){this.$router.push('/')}}}}</script><style scoped>/*---------这里是全局样式和顶部样式，与本文关联不大-----------*/*{margin:0;padding:0;text-decoration:none;list-style:none;}.top{width:100%;height:40px;background:#00BFFF;border-bottom:1px solid #4d4d4d;display:flex;}.top h3{flex:8;}.top h3,.top h4{color:#fff;line-height:40px;margin:0;padding-left:30px;}.top h4{flex:1;}.top h4:hover{text-decoration:underline;}#app{width:100%;height:95vh;display:flex;}/*----------这里是主要内容----------*/.left{flex:2;background:#6495ED;flex-direction:column;}.right{flex:7;background:#B0E0E6;}.left ul{margin-top:10px;}.left ul li{height:12vh;line-height:12vh;text-align:center;color:#ccc;font-size:20px;font-weight:500;}.left ul .active{background:#B0E0E6;color:#000;transition:all 0.8s ease;}/*--------------下面是右侧视窗实现组件切换的动画------------------*/.v-enter,.v-leave-to{opacity:0;transform:translate(150px,150px);}.v-enter-active,.v-leave-active{transition:all 0.4s ease;}</style>
组件效果如下（不包括右侧视窗子组件）
详解部分1 渲染 添加点击事件 参数为被点击元素的下标
html代码部分
<div class="left"><ul><li v-for="(item,index) in funcList"@click="getfunc(index)">{{ item.name }}</li></ul></div>
Vue代码部分
export default {name: "manager",data(){return{funcList:[{name:'信息总览',com:'managerAll'},{name:'新增管理',com:'managerAdd'},{name:'删除管理',com:'managerDel'},{name:'查询功能',com:'managerSel'},{name:'修改功能',com:'managerUpdate'},{name:'关于系统',com:'managerAbout'}],}},methods:{getfunc(index){console.log(index)}}}
首先定义一个数组，将其中的功能名称写好，在 template 中定义要循环的元素。(html页面的话在el控制的元素中定义)（com属性的作用部分3会用到）使用v-for循环时 加上当前索引号，v-for="(item,index) in funcList"使用差值表达式{{ item.name }}，为 li元素 批量渲染元素标题定义getfunc(index)事件使用Vue的事件绑定方式@click="getfunc(index)"其中 getfunc 是事件名称，index是索引接下来就可以在getfunc(index)事件中去用这个下标做你想做的事情了（因为下标从0开始，如果想要知道具体是第几个数据需要+1）
详解部分2 点击后添加css类 点击其他li元素取消（三元运算符方式）
我这里用的样式首先写好激活类的样式，在style中，这里默认就按照名称为 .active 的css类去做这里的思路非常容易，首先在 data 中定义一个 active 变量 值为0的话，默认是第一个元素会添加 值为-1的话，则默认都不添加
data(){return{active:0}}
在被循环输出的 li 标签身上，添加一个绑定属性 :class，使用三元运算符形式
<li :class="active == index?'active':''">// 三元运算符解析：如果active变量等于当前元素下标index，那么给他active这个css类，否则为空
在点击事件中，为active变量赋值，如果哪个元素触发了点击事件，那么就让active变量等于它的下标，触发 绑定好的属性为它添加类
getfunc(index){this.active = index}
没了
详解部分3 实现点击切换路由
我这里的思路大概是，首先为数组元素添加com属性，值是它们要指向的url（上文已经添加好）data(){return{funcList:[{name:'信息总览',com:'managerAll'},{name:'新增管理',com:'managerAdd'},{name:'删除管理',com:'managerDel'},{name:'查询功能',com:'managerSel'},{name:'修改功能',com:'managerUpdate'},{name:'关于系统',com:'managerAbout'}],}}
在点击事件 getfunc() 中，添加一个参数，并添加一步操作，点击事件执行后，让router将com这个参数push到url中
getfunc(index,com){this.active = indexthis.$router.push(com)}
修改循环输出的li元素的点击事件，为其添加一个新参数
<li v-for="(item,index) in funcList"@click="getfunc(index,)":class="active == index?'active':''">{{ item.name }}</li>
在 router对象 中定义好 url 对应要切换的组件
import manager from "../components/manager"......// 我这里是外置路由，需要引入各个要用到的组件，这里就省略了// 如果没有分离路由模块，那么代码可能稍有差别，但routes路由规则不会变export default new Router({routes: [{path:'/manager', component: manager,children:[{path:'/manager',component: managerAll},{path:'/managerAll',component: managerAll},{path:'/managerAdd',component: managerAdd},{path:'/managerDel',component: managerDel},{path:'/managerSel',component: managerSel},{path:'/managerAbout',component: managerAbout},{path:'/managerUpdate',component: managerUpdate}]}]})
大功告成，可以看到点击后能够随着当前功能实现路由切换
创作不易，如有失误，多多指点，大神轻喷……
如何给Vue v-for循环渲染出的元素（导航栏） 批量添加点击事件 及 点击后添加css类样式 及 点击后路由跳转切换
