<!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. Myeclipse 出现了Could not generate DH keypair 错误

    在myeclipse下安装svn插件,出现了Could not generate DH keypair,这么一个错误. 这个问题困扰了我半天时间,各种百度也找不到答案,或许是百度能力问题吧.百度出来的 ...

  2. 【Maven jar】打包单个或多个文件，有依赖jar包的将架包一起打包成一个jar包供别的项目引用

    之前有一片文章,是打包单个java文件的.这次想要将http://www.cnblogs.com/sxdcgaq8080/p/8398780.html  打包成jar包,发现这个java文件中引用了多 ...

  3. 【bootstrap】Bootstrap Notify的使用步骤

    Bootstrap Notify说明文档:http://bootstrap-notify.remabledesigns.com/ Bootstrap Notify的GitHub地址:https://g ...

  4. C 标准库 - <stddef.h>

    C 标准库 - <stddef.h> 简介 stddef .h 头文件定义了各种变量类型和宏.这些定义中的大部分也出现在其它头文件中. 库变量 下面是头文件 stddef.h 中定义的变量 ...

  5. ios You app information could not be saved. Try again. If the problem persists, contact us

    ios You app information could not be saved. Try again. If the problem persists, contact us  大概意思:你的a ...

  6. windows程序设计——飞机大战笔记（Access数据库的使用）

    //////////////////2015/07/22/////////////////// /////////////////by xbw ///////////////////////// // ...

  7. Solaris文件系统管理

    不同的操作系统使用不同类型的文件系统 1.文件(管理)系统:是用来对文件和目录进行管理.控制的数据结构的总称. Windows当中的文件系统: ntfs ,fat32 ,fat64 Solaris 当 ...

  8. RSA、AES加密解密

    RSA #!/usr/bin/env python # -*- coding:utf-8 -*- import rsa import base64 # ######### 1. 生成公钥私钥 #### ...

  9. SEO（搜索引擎优化）

    高级搜索指令 搜索命令中的字符均为英文 用户除了可以通过搜索引擎搜索普通的查询词外,还可以使用一些特殊的高级搜索指令.这些指令普通用户很少会用到,但是对于SEO人员进行竞争对手研究和寻找外部链接资源却 ...

  10. caffe学习--使用caffe中的imagenet对自己的图片进行分类训练(超级详细版) -----linux

    http://blog.csdn.net/u011244794/article/details/51565786 标签: caffeimagenet 2016-06-02 12:57 9385人阅读  ...