<!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. apollo 消息分发源代码分析

    1.MessageDispatch消息分发信息 public static final byte DATA_STRUCTURE_TYPE = CommandTypes.MESSAGE_DISPATCH ...

  2. Python中的列表、元祖、字典

    一.列表 一组有序项目的集合.可变的数据类型[可进行增删改查] 列表是以方括号"[]"包围的数据集合,不同成员以","分隔. 列表中能够包括不论什么数据类型,也 ...

  3. Spring学习资料

    1.马士兵视频 2.SPRING技术内幕__深入解析SPRING架构与设计原理 3.jinnianshilongnian博客 4.Spring实战 (Spring IN Action) 5.官方文档

  4. iterm2 配色

    http://blog.csdn.net/sanwuhai/article/details/48729561

  5. UVA 610 - Street Directions（割边)

    UVA 610 - Street Directions option=com_onlinejudge&Itemid=8&page=show_problem&category=5 ...

  6. 转载---- 使用opencv源码自己编制android so库的过程

    http://blog.csdn.net/lantishua/article/details/21182965 工作需要,在Android上使用OpenCV.opencv当前的版本(2.4.8)已经有 ...

  7. Selenium学习（二）入门小例子

    1)打开百度页面 2)输入“hello” 3)点击百度一下按钮 from selenium import webdriver url = "http://" + "www ...

  8. 《MySQL必知必会学习笔记》：子查询

    子查询 在開始了解子查询之前,首先做下准备工作,建立3个表, 一个是customers表,当中包含:客户名字.客户ID.客户Tel等. 一个是orders表,当中包含:订单号.客户ID.订单时间等. ...

  9. 【Web探索之旅】第三部分第一课：server

    wx_fmt=jpeg" alt="0? wx_fmt=jpeg" style="height:auto"> 内容简单介绍 .第三部分第一课:s ...

  10. c++通用写文件调试代码

    #include <stdio.h>#include <sstream>#include <iostream> std::stringstream strs;str ...