<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title></title>

    <link rel="icon" type="image/ico" href="src/assets/favicon.ico">

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

    <script src="src/assets/vue2.min.js"></script>

</head>

<body>

    <a v-for="(index,item) in items" href="http://www.baidu.com" @click="getTarget($event)" data-index="{{index}}">{{$index}}{{item.text}}<br></a>

    <input type="text" id="attr">

</body>

<script>

    new Vue({

        el:'body',

        data:{

            items:[

                {text:'小黄'},

                {text:'小明'},

                {text:'小红'},

                {text:'小蓝'}

            ]

        },

        methods:{

            getTarget:function (ev) {

                ev.preventDefault();//禁止跳转

                let target = event.target;//取当前点击目标

                console.log(target.getAttribute('data-index'));//取当前点击目标的属性

                document.getElementById('attr').value=target.getAttribute('data-index');

            }

        }

    })

</script>

</html>

　　

v-for指令用法二的更多相关文章

  1. 实例演示oracle数据块状态视图v$bh的用法二 热点块问题(转)

    在实例一中,我们读取到了x$bh中的tch字段,该字段表示的该字段被读取/写入的次数,这个值在oracle的LRU算法中,是一个重要的参数,如果这个字段被访问,则该值就会增加: 1,第一次查看TCH的 ...

  2. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  3. (转)Linux系统stat指令用法

    <Linux系统stat指令用法>  原文:https://www.cnblogs.com/linux-super-meng/p/3812695.html stat指令:文件/文件系统的详 ...

  4. 学习AngularJs:Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  5. react基础用法二(组件渲染)

    react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 />  ...

  6. [Linux] scp指令用法

    scp 指令用法 # scp usage: scp [-12346BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [ ...

  7. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  8. Matlab 常用绘图指令（二维图形）

    使用matlab的时候常常会忘掉一些指令,每次都要重新查找,挺麻烦的,这里收集一些常用的绘图指令,供自己和大家以后方便查找和使用. 1.例子-包含了常用绘图命令 clear clc %%数据准备 x ...

  9. Angular内置指令（二）

    目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...

随机推荐

  1. SQL-基础学习2--ORDER BY ,DESC，WHERE, BETWEEN,AND ,OR ,IN ,NOT

    所使用的数据库资料在:数据库资料   第三课:排序检索数据 3.1 排序数据 按单列排序 如果不排序,数据一般将以它在底层表中出现的顺序显示,这有可能是数据最初添加到表中的顺序.但是,如果数据随后进行 ...

  2. 临远的activiti教程

    1. 简介 协议 下载 源码 必要的软件 JDK 6+ Eclipse Indigo 和 Juno 报告问题 试验性功能 内部实现类 2. 开始学习 一分钟入门 安装Activiti 安装Activi ...

  3. jquery的ajax的success和fail用法

    $.ajax({ type:"POST", url: url, contentType: 'application/json;charset=utf-8', data: JSON. ...

  4. ant的安装和配置

    1.从官网下载bin源码 http://ant.apache.org/bindownload.cgi#Verify%20Releases 校验源码的完整性 2.直接把解压,然后把文件放入/usr/lo ...

  5. C++错误——”无法启动程序”…\xxx.exe” 系统找不到指定的文件”

    背景 在VS2010环境下,升级了一个用C++编写的程序,编译生成成功,但是,不能在VS中直接运行(可以通过打开debug文件目录的exe应用程序运行),提示以下错误:”无法启动程序”…\xxx.ex ...

  6. 修改host文件原理 localhost，127.0.0.1之间有什么区别

    修改host文件原理http://www.zhihu.com/question/19782572 localhost与127.0.0.1的区别是什么 相信有人会说是本地ip,曾有人说,用127.0.0 ...

  7. 赵雅智_Swift（3）_swift凝视

    请将你的代码中的非运行文本凝视成提示或者笔记以方便你将来阅读. Swift 的编译器将会在编译代码时自己主动忽略掉凝视部分. 单行凝视 以双正斜杠作(//)为起始标记: // 这是一个凝视 多行凝视 ...

  8. 【每日Scrum】第二天（4.12） TD学生助手Sprint1站立会议

    TD学生助手Sprint1站立会议(4.12) 任务看板 站立会议内容 组员 昨天 今天 困难 签到 刘铸辉 (组长) 做了几个Sqlite编辑事件导入数据库没成功,就编辑图片滑动显示功能 今天学习了 ...

  9. kubernetes集群管理常用命令一

    系列目录 我们把集群管理命令分为两个部分,第一部分介绍一些简单的,但是可能是非常常用的命令以及一些平时可能没有碰到的技巧.第二部分将综合前面介绍的工具通过示例来讲解一些更为复杂的命令. 列出集群中所有 ...

  10. gridcontrol复选框功能实现（超具体）

    博主这几天就准备离职了,以后不再做.Net开发.因此这应该是我写的最后一篇关于dev控件的博文.既然是最后一篇,那就写的具体一些.画个圆满的省略号...... 本文介绍gridcontrol怎样实现复 ...