<span v-for="(n,nav) in floorList" data-id="{{nav.itemId}}" v-on:click="getId($event)">{{nav.floorTitle}}</span>

//js代码
function scrollTo(event){
var target = event.target || window.event.srcElement,
//获取对应元素的id值
id = target.getAttribute('data-id');
console.log(id);
}

v-for遍历出的元素上添加click事件,获取对应元素上的属性id值的更多相关文章

  1. vue.js 1.0中用v-for遍历出的li中的@click事件在移动端无效

    在vue.js使用v-for遍历出的li中的@click事件在移动端无效,在网页端可以执行,代码如下 <template> <div class="rating-secti ...

  2. vue click事件获取当前元素属性

    Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event) ...

  3. 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响

    原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...

  4. vue 移动端在div上绑定click事件 失效

    在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...

  5. 在object,embed上添加跳转链接(视频上添加跳转)

    今天遇到个问题,就是在视频上添加跳转链接时,谷歌浏览器能正常跳转,但是ie下,却无效,视频使用object引入,<a>标签跟随其后采用绝对定位,和平时的图片加跳转操作一样.原来是需要加上& ...

  6. 遍历切片slice,结构体struct,映射map,interface{}的属性和值

    1 前言 说明:interface{}必须是前三者类型 2 代码 /** * @Author: FB * @Description: * @File: testOutput.go * @Version ...

  7. vue中,svg图标添加click事件,部分浏览器不生效

    vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...

  8. vue.js click点击事件获取当前元素对象

    Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...

  9. 用js给循环的列表添加click事件

    纠结了两天终于搞定了,首先id这个东西必不可少,这个时候不能用onclik事件,而是需要使用代理事件. 比如说,这里有个列表如下: <ul> <li></li> & ...

随机推荐

  1. Android Weekly Notes Issue #218

    Android Weekly Issue #218 August 14th, 2016 http://androidweekly.net/issues/issue-218 ARTICLES & ...

  2. emoji哈哈哈哈

    Unicode 官网上的FAQ令人发笑,啊哈哈哈 Q: What are the most popular emoji characters? Q: Do emoji characters have ...

  3. (视频)Erich Gamma 与 Visual Studio Online 的一点野史

    大家对Erich Gamma的熟悉应该都集中在<设计模式>, Eclipse以及最近微软所发布的Visual Studio Code跨平台代码编辑器.其实在Erich加入微软的头几年里,他 ...

  4. [Erlang 0111] Erlang Abstract Format , Part 2

       上回书,我们说到飞天玉虎蒋伯芳来到蜈蚣岭,不是,重来,上回咱们说到可以在Erlang Shell里面手工构造,加载并调用一个模块.在那个demo里面,我把多个Form单独生成出来,最后放在一起做 ...

  5. [Erlang 0110] Erlang Abstract Format , Part 1

    Erlang Abstract Format并不难懂,只是枯燥一点罢了,如果把Abstract Format的文档翻译出来,其实就是Erlang教科书中语法入门的部分. Erlang Abstract ...

  6. 运维之网络安全抓包—— WireShark 和 tcpdump

    ------------------------------------------------本文章只解释抓包工具的捕获器和过滤器的说明,以及简单使用,应付日常而已----------------- ...

  7. Chrome 扩展机制

    据说,今年9月份开始,谷歌将在Chrome浏览器中全面禁用NPAPI插件,Chrome 45以后将无法再加载NPAPI插件,并推出了一种新的机制:扩展. 其实,如果把浏览器看作一块画布的话,NPAPI ...

  8. 通过XShell链接虚拟机的CentOS

    今天在Win7环境通过XShell链接VirtualBox的CentOS;始终链接不上,原来是因为虚拟机选择网络链接方式不对[推荐连接方式:Host-only Adapter(主机模式). 知识提要: ...

  9. Azure上的几个坑

    此文用于记录在使用Azure中国版时遇到的一些“坑”. 1.虚拟机备份/还原 在某些场景中,使用备份/还原功能来创建(克隆)虚拟机比使用capture的image要方便很多.虚拟机备份后,执行还原操作 ...

  10. 从BSP模型到Apache Hama

    一.什么是BSP模型 概述 BSP(Bulk Synchronous Parallel,整体同步并行计算模型)是一种并行计算模型,由英国计算机科学家Viliant在上世纪80年代提出.Google发布 ...