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()
          }
        }
      }
    },
 }
目录
相关文章
|
10天前
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
212 58
|
1天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
5天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
7天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
13天前
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
42 11
|
9天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
42 11
|
1天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
1天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
8天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
29 10
|
8天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
27 9