<!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. mac安装.net core

    https://www.microsoft.com/net/core#macos Install for macOS 10.11 or higher (64 bit) 1 Install pre-re ...

  2. cocos2d-x 事件分发机制 ——触摸事件监听

    cocos2d-x 3.0 出来已经好久了,也已经用3.0写了几个小游戏,感觉3.0的事件触发机制太赞了,随这里总结一下.也算是对知识的一种回顾和加深理解. 3.0的事件分发机制中.须要也只须要通过创 ...

  3. DICOM医学图像处理：Deconstructed PACS之Orthanc，Modification & Anonymization

    背景: 上篇博文为引子,介绍了一款神奇的开源PACS系统——Orthanc.本篇开始解读官方Cookbook中的相关内容,对于简单的浏览.访问和上传请阅读前篇博文.在常规的PACS系统中还未出现对于D ...

  4. Effective JavaScript Item 54 将undefined视为&quot;没有值&quot;

    将undefined视为"没有值" JavaScript中的undefined是一个特殊的值:当JavaScript没有提供详细的值时.它就会产生undefined. 比方: 未被 ...

  5. Webduino Smart 从入门到起飞

    前言 原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 试用了一下,感觉这板子+WebduinoBlockly在线开发环境,下限低.上限也低,以后肯定要刷其他固件的.举个简单的例子,WB ...

  6. 使用Cout输出String和CString对象

    CString和string都是一个类,不同的是CString主要用于MFC或者是ATL编程中,而string则多用于Windows控制台编程中 在实际编程过程中,我们经常用到string或者是CSt ...

  7. react 通过 classnames 处理 多个class 的问题

    react原生动态添加多个className会报错: import style from './style.css' <div className={style.class1 style.cla ...

  8. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps Office的JavaScript对象模型

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps  Office的JavaScript对象模型         ...

  9. sonar+Jenkins代码覆盖率检测

    最近公司在搞代码覆盖率检查,简单看了一下结合Jenkins +jacoco + sonar做了一下主要涉及到项目层面和Jenkins层面的东西: 这里只讲一下集成,不讲解sonar的安装Jenkins ...

  10. cocosStudio中使用PageView,ListView和ScrollView

    晚上吃东西好像吃坏肚子了,.但是技术还要继续研究.最近工作中要使用CocosStudio做界面,好吧,不管对他有什么偏见,学习一下吧.这里主要记录一下三个控件的使用和说明.就是ScrollView,L ...