vue3seamlessscroll 点击事件

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

1. 首先定义一个数组，将其中的功能名称写好，在 template 中定义要循环的元素。(html页面的话在el控制的元素中定义)（com属性的作用部分3会用到）
2. 使用v-for循环时 加上当前索引号，v-for="(item,index) in funcList"
3. 使用差值表达式 {{ item.name }} ，为 li元素 批量渲染元素标题
4. 定义 getfunc(index) 事件
5. 使用Vue的事件绑定方式 @click="getfunc(index)" 其中 getfunc 是事件名称，index是索引
6. 接下来就可以在 getfunc(index) 事件中去用这个下标做你想做的事情了（因为下标从0开始，如果想要知道具体是第几个数据需要+1）

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

• 我这里用的样式

0. 首先写好激活类的样式，在style中，这里默认就按照名称为 .active 的css类去做
1. 这里的思路非常容易，首先在 data 中定义一个 active 变量

• 值为0的话，默认是第一个元素会添加 值为-1的话，则默认都不添加

data(){
	return{
		active:0
	}
}

2. 在被循环输出的 li 标签身上，添加一个绑定属性 :class，使用三元运算符形式

<li :class="active == index?'active':''">
// 三元运算符解析：如果active变量等于当前元素下标index，那么给他active这个css类，否则为空

3. 在点击事件中，为active变量赋值，如果哪个元素触发了点击事件，那么就让active变量等于它的下标，触发 绑定好的属性为它添加类

getfunc(index){
    this.active = index
}

4. 没了

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

1. 我这里的思路大概是，首先为数组元素添加com属性，值是它们要指向的url（上文已经添加好）

data(){
    return{
        funcList:[
           {name:'信息总览',com:'managerAll'},
           {name:'新增管理',com:'managerAdd'},
           {name:'删除管理',com:'managerDel'},
           {name:'查询功能',com:'managerSel'},
           {name:'修改功能',com:'managerUpdate'},
           {name:'关于系统',com:'managerAbout'}
        ],
    }
}

2. 在点击事件 getfunc() 中，添加一个参数，并添加一步操作，点击事件执行后，让router将com这个参数push到url中

getfunc(index,com){
    this.active = index
    this.$router.push(com)
}

3. 修改循环输出的li元素的点击事件，为其添加一个新参数

<li v-for="(item,index) in funcList"
    @click="getfunc(index,item.com)"
    :class="active == index?'active':''">
    {{ item.name }}
</li>

4. 在 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}
      ]
    }
  ]
})

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

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