vue项目进入一个页面自动触发某元素的点击事件——自定义指令directives

简介: vue项目进入一个页面自动触发某元素的点击事件——自定义指令directives

前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有,很详细,分享给大家。大家及时保存,说不定啥时候就没了。

简述

进入页面自动点击左侧for循环的第一个元素,展示数据,达到进入页面默认展示的效果。

步骤一 自定义指令绑定for循环的第二个参数

步骤二 使用directives自定义指令

<el-menu
     text-color="#36354B"
       active-text-color="#3B86FF"
       style="border: none"
     >
     <!-- 左侧分类类别列表  羽绒服/靴子/苹果 -->
       <el-menu-item
         v-for="(item, inx) in setItem"
         :key="item._id"
          v-hClick="inx"   // 自定义指令绑定for循环第二个参数,这里的inx还可以是其他标的,指令中可通过其做出判断
         @click.native="handleMenu(item)"
         :index="item._id"
     >
     <!-- <i :class="item.icon"></i> -->
      <span slot="title">{{item.name}}</span>
     </el-menu-item>
</el-menu>
export default {
   // 自定义组件
    directives: {
      hClick: {
        inserted(el,binding,index) {
          if(binding.value===0){     // 给for循环第一个元素执行点击事件
              el.click()
          }
        }
      }
    },
 }
目录
相关文章
|
2天前
|
JavaScript
|
1天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
10 2
|
4天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
15 4
|
2月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
51 3
|
2月前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
2月前
|
JavaScript Java 关系型数据库
毕设项目-基于Springboot和Vue实现蛋糕商城系统(一)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
116 0
|
2月前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
101 0
Vue3+Vite+TypeScript常用项目模块详解
|
2月前
|
设计模式 JavaScript
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
|
2月前
|
前端开发 JavaScript Java
毕业设计|基于SpringBoot+Vue的科研课题项目管理系统
毕业设计|基于SpringBoot+Vue的科研课题项目管理系统
138 1
|
2月前
|
JavaScript 前端开发
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题