如何给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,item.com)"
: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 = index
this.$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 = index
this.$router.push(com)
}
- 修改循环输出的li元素的点击事件，为其添加一个新参数
<li v-for="(item,index) in funcList"
@click="getfunc(index,item.com)"
: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}
]
}
]
})
- 大功告成，可以看到点击后能够随着当前功能实现路由切换
创作不易，如有失误，多多指点，大神轻喷……