<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. app使用微信支付成功后,点击返回到该app却跳到另外一个app去了

    刚接手了公司iOS的两个APP, 现在碰到了这样一个问题: 有一台iPhone在一个APP中使用了微信支付,支付成功后,点击返回到该APP,结果却跳到了另外一个APP去了. 这两个APP都是公司开发的 ...

  2. centos直接yum安装nginx

    Ubuntu下安装nginx,直接apt-get install nginx就行了,很方便. 但是今天装了CentOS6.2,直接yum install nginx不行,要先处理下源,下面是安装完整流 ...

  3. 使用gulp解决外部编辑器修改Eclipse文件延迟更新的问题

    本人前端用惯了Hbuilder,修改了eclipse项目中的文件后,由于是外部编辑器修改过的,eclipse不会自动部署更新,一般按F5刷新项目,或者在 preferences > genera ...

  4. Oracle策略相关

    Oracle策略可以限制查询.修改.删除.新增等操作,刚接触,对查询做一个测试: 参照 http://blog.csdn.net/diyyong/article/details/19552637 用法 ...

  5. Tomcat 服务应用

    转自:http://wiki.jikexueyuan.com/project/tomcat/windows-service.html Tomcat8 是一个服务应用,能使 Tomcat 8 以 Win ...

  6. java程序设计之循环链表

    照例来说点废话,愿自己生一颗温柔细腻的心,这样女朋友也许一个眼神,一个微笑,我就知道如何做,可惜内心与外表一样粗糙,这一生有幸认识她,愿天下有情人终成眷属. 循环链表,顾名思义循环就好了,所以建一个线 ...

  7. grunt快速入门

    快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本 ...

  8. mysql 文件导入方法总结

    数据导入3三种方法 一.phpMyAdmin 限制大小:2M 1.创建数据库 2.导入.sql或.sql.zip文件 大数据导入方法一:http://jingyan.baidu.com/article ...

  9. FineUI(专业版)公测版发布(这速度,真TM快!)

    经过近一年的筹备.编码和测试,FineUI(专业版)公测版终于和大家见面了!现在就来体验一下专业版飞一般的速度吧:http://fineui.com/demo_pro/FineUI(专业版)首页:ht ...

  10. jquery版固定边栏滚动特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...