如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换

如何给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 = 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,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}]}]
})

大功告成，可以看到点击后能够随着当前功能实现路由切换

创作不易，如有失误，多多指点，大神轻喷……

如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换相关推荐

vue使用高德地图为信息窗体再添加点击事件
即使是用的vue,也不能使用@click为窗体添加点击事件,需要使用onclick,并且在定义了函数后,使用该函数还是会报函数未定义的错误,需要在window下添加该函数,点击时可以在原型链中找到该函 ...
Vue 之 vue-seamless-scroll 实现简单自动无缝滚动，且添加对应点击事件的简单整理
Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理目录 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事 ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...
vue项目使用svg渲染地图并添加点击事件，动态改变背景颜色
需求: ui给了一张地图的svg,需要前端渲染出来并添加对应的点击事件,选中区域,背景颜色需要改变实现思路: 1.拿到需要渲染的 svg图片,把其中path的值赋值过来,所有数据一起组成一个新的js ...
给动态生成的id标签添加html,vue动态渲染svg、添加点击事件
欢迎关注[前端小讴的github],原创技术文章业务需求(vue项目中) 1.页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素的属性和值 html标签经多次实验,用em ...
VUE中使用Antv.X6实现将侧边导航栏节点拖拽到画布中，并能够将画布保存到缓存中
直接上代码,参考官网的文档安装完之后可以直接运行. <template><div class="home"><div class="left ...
vue中如何在登陆页面不显示导航栏
导航栏作为系统的通用组件,我并不想让其显示在登陆页面中,因此可以按照以下方法实现 1.将通用组件如导航栏等和<router-view />放在一起 app.vue <div>& ...
ios点击大头针气泡不弹出_高德 ios 自定义气泡添加点击事件无效问题
在使用高德地图sdk开发的时候,需要自定义气泡吹出框,发现气泡添加的点击事件或者button都没响应. 原因:自定义的气泡是添加到大头针上的,而大头针的size只有下面很小一部分,所以calloutV ...

如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换

如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换

能够实现或解决的问题

正文

详解部分1 渲染添加点击事件参数为被点击元素的下标

html代码部分

Vue代码部分

详解部分2 点击后添加css类点击其他li元素取消（三元运算符方式）

详解部分3 实现点击切换路由

如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换相关推荐

最新文章

热门文章

如何给Vue v-for循环渲染出的元素（导航栏） 批量添加点击事件 及 点击后添加css类样式 及 点击后路由跳转切换

如何给Vue v-for循环渲染出的元素 批量添加点击事件 及 点击后添加css类样式 及 点击后路由跳转切换

能够实现或解决的问题

正文

详解部分1 渲染 添加点击事件 参数为被点击元素的下标

html代码部分

Vue代码部分

详解部分2 点击后添加css类 点击其他li元素取消（三元运算符方式）

详解部分3 实现点击切换路由

如何给Vue v-for循环渲染出的元素（导航栏） 批量添加点击事件 及 点击后添加css类样式 及 点击后路由跳转切换相关推荐

最新文章

热门文章

如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换

如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换

详解部分1 渲染添加点击事件参数为被点击元素的下标

详解部分2 点击后添加css类点击其他li元素取消（三元运算符方式）

如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换相关推荐