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()
          }
        }
      }
    },
 }
目录
相关文章
|
1天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
7 1
|
1天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
1天前
|
JavaScript 前端开发 开发工具
如何学习vue框架
【7月更文挑战第5天】 - 先学HTML/CSS/JS基础和前端工程化工具(npm, webpack, Git)。 - 从Vue官方文档学习基础,包括指令、组件、响应式系统。 - 深入研究Vue Router和Vuex,掌握路由管理和状态管理。 - 学习自定义指令和Mixins,优化性能技巧。 - 实战项目练习,加入Vue社区,阅读相关资源,提升技能。 - 关注Vue生态,持续实践和创新,以适应不断发展的框架。
5 0
|
JavaScript 数据安全/隐私保护
work02_vue页面打印水印
work02_vue页面打印水印
302 0
work02_vue页面打印水印
|
1天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
|
2天前
|
JavaScript 区块链
vue 自定义网页图标 favicon.ico 和 网页标题
vue 自定义网页图标 favicon.ico 和 网页标题
9 1
|
1天前
|
JavaScript
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
|
2天前
|
存储 JavaScript 数据安全/隐私保护
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
12 1
|
3天前
|
JavaScript
vue实战——404页面模板001——男女手电筒动画
vue实战——404页面模板001——男女手电筒动画
8 1
|
1天前
|
缓存 JavaScript 算法
vue 性能优化
vue 性能优化
10 0