<!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. 【IntelliJ idea/My/ecplise】启动项目前，修改配置JVM参数

    My/ecplise下都是一样的: IDEA下:

  2. Maven引入本地Jar包并打包进War包中

    1.概述 在平时的开发中,有一些Jar包因为种种原因,在Maven的中央仓库中没有收录,所以就要使用本地引入的方式加入进来. 2. 拷贝至项目根目录 项目根目录即pom.xml文件所在的同级目录,可以 ...

  3. Android的包管理机制浅析（二）

    上篇刚好说到获取到了签名信息,以下进入安装过程,直接上源代码: private void installNewPackageLI(PackageParser.Package pkg, int pars ...

  4. ThinkPHP学习（五）图片验证码

    今天用到图片验证码的功能,在网上找到ThinkPHP的下面代码: Public function verify(){ import('think.Image'); Image::buildImageV ...

  5. idea2018注册方法

    下面是具体的破解激活步骤: 1. 下载破解补丁文件,路径为:http://idea.lanyus.com/jar/JetbrainsCrack-2.7-release-str.jar 2.将补丁放在安 ...

  6. hdu3251 最小割

    题意: 给n个城市,m条有向边.每条边有权值,如今有些城市能够选择得到.可选的城市有一个价值.可是要满足从1到达不了这些城市,为了满足要求能够去掉一些边,须要花费边的权值,问终于得到的最大价值是多少, ...

  7. 摘自《Linux与unix shell编程指南》

    shift运行后,$#随之减少:如果需要知道命令行中输入的最后一个参数(通常是一个文件名),可以有两种选择:使用命令 eval echo \$$#;使用shift命令:shift 'expr $# - ...

  8. 最简单的基于FFmpeg的移动端样例附件：SDL Android HelloWorld

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  9. Fedora25 下 OpenCV2.4.12 的安装

    你必须非常努力,才能看起来毫不费力.---------------感谢原作者的分享. opencv官网上面给出的 linux 下安装方式,基本上都是通过编译源码,即下载代码, cmake->ma ...

  10. 02 http协议之方法与状态码

    一:HTTP请求信息和响应信息的格式 请求: ()请求行 ()请求头信息 ()请求主体信息(可以没有) () 头信息结束后和主体信息之间要空一行 请求行又分3部分 请求方法 请求路径 所用的协议 请求 ...