<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中使用ExpandableListView实现好友分组

    一个视图显示垂直滚动两级列表中的条目.这不同于列表视图,允许两个层次,类似于QQ的好友分组.要实现这个效果的整体思路为: 1.要给ExpandableListView 设置适配器,那么必须先设置数据源 ...

  2. MPAndroidChart 3.0——LineChart(折线图)

    显示效果 MPAndroidChart每一种图表的基本使用方式都基本相同 了解一种图表的实现 参考项目源码其他的图表也就差不多哩 在布局文件中定义 <com.github.mikephil.ch ...

  3. 【代码笔记】iOS-自定义弹出框

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. [s ...

  4. iOS 下拉刷新-上拉加载原理

    前言 讲下拉刷新及上拉加载之前先给大家解释UIScrollView的几个属性 contentSize是UIScrollView可以滚动的区域. contentOfinset 苹果官方文档的解释是&qu ...

  5. Python version 3.4 required, which was not found in the registry.解决

    问题描述: 在Win7环境下已安装Python3.4,准备安装numpy和nltk,运行安装程序报如题错误,具体解决方案如下: 1.将LOCAL_MACHINE\software\python\Pyh ...

  6. ubuntu kylin 14.04安装Node.js和Famous

    默认使用软件中心安装node.js,然后参考https://famo.us/install进行安装 1.sudo apt-get install git 2.npm install -g yo gru ...

  7. Android Studio导入github下载的project和module

    前言:我们以前eclispe时代, 经常都是跑到github浏览第三方开源资源,然后下载下来,运行一下sample之类的,学习没有接触的第三方安卓库,但是到了Android Studio,在githu ...

  8. Transient的作用

    1:transient的作用及其使用方法 当一个对象实现类Serilizable接口,那么这个类就可以被序列化,java的这种序列化的模式为开发者提供了很多的便利. 然而在实际开发中,我们常常遇到这样 ...

  9. Linux下Source Insight的安装和汉化

    原创文章,转载请注明出处. 工欲善其事,必先利其器.Source Insight绝对是阅读C和C++代码的利器,另外,Source Insight的体量很小,安装便捷,显示直观,比vim+cscope ...

  10. [译]RxJS 5.X基础篇

    欢迎指错与讨论 : ) 当前RxJS版本:5.0.0-beta.10.更详细的内容尽在RxJS官网http://reactivex.io/rxjs/manual/overview.html.文章比较长 ...