v-for指令用法二
<!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指令用法二的更多相关文章
- 实例演示oracle数据块状态视图v$bh的用法二 热点块问题(转)
在实例一中,我们读取到了x$bh中的tch字段,该字段表示的该字段被读取/写入的次数,这个值在oracle的LRU算法中,是一个重要的参数,如果这个字段被访问,则该值就会增加: 1,第一次查看TCH的 ...
- 学习AngularJs:Directive指令用法(完整版)
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- (转)Linux系统stat指令用法
<Linux系统stat指令用法> 原文:https://www.cnblogs.com/linux-super-meng/p/3812695.html stat指令:文件/文件系统的详 ...
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- react基础用法二(组件渲染)
react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 /> ...
- [Linux] scp指令用法
scp 指令用法 # scp usage: scp [-12346BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [ ...
- Vue中基本指令用法
指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...
- Matlab 常用绘图指令(二维图形)
使用matlab的时候常常会忘掉一些指令,每次都要重新查找,挺麻烦的,这里收集一些常用的绘图指令,供自己和大家以后方便查找和使用. 1.例子-包含了常用绘图命令 clear clc %%数据准备 x ...
- Angular内置指令(二)
目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...
随机推荐
- 【jar】JDK将单个的java文件打包为jar包,并引用到项目中使用【MD5加密】
==================================================================================================== ...
- UITableViewCell -- 动画
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath: ...
- Pearson product-moment correlation coefficient in java(java的简单相关系数算法)
一.什么是Pearson product-moment correlation coefficient(简单相关系数)? 相关表和相关图可反映两个变量之间的相互关系及其相关方向,但无法确切地表明两个变 ...
- HDU 4403 A very hard Aoshu problem (DFS暴力)
题意:给你一个数字字符串.问在字符串中间加'='.'+'使得'='左右两边相等. 1212 : 1+2=1+2, 12=12. 12345666 : 12+3+45+6=66. 1+2+3+4 ...
- python(21)- python内置函数练习
题目一:用map来处理字符串列表啊,把列表中所有人都变成sb,比方alex_sbname=['alex','wupeiqi','yuanhao'] name=['alex','wupeiqi','yu ...
- Node.js 数据存储方式的选择
如何为你的 Node.js 应用挑选数据库 Node.js 应用一般有三种方式保存数据. 不使用任何数据库管理系统(DBMS),把数据保存在内存里或直接使用文件系统. 使用关系数据库.例如 MySQL ...
- Android 非静态内部类导致内存泄漏原因深入剖析
背景 上周发现蘑菇街IM-Android代码里面.一些地方代码编写不当.存在内存泄漏的问题.在和疯紫交流的过程中.发现加深了一些理解,所以决定写一下分析思路,相互学习. 内存泄漏 一个不会被使用的对象 ...
- UiAutomator源代码分析之获取控件信息
依据上一篇文章<UiAutomator源代码分析之注入事件>開始时提到的计划,这一篇文章我们要分析的是第二点: 怎样获取控件信息 我们在測试脚本中初始化一个UiObject的时候一般是像下 ...
- kubernetes高级之pod安全策略
系列目录 什么是pod安全策略 pod安全策略是集群级别的用于控制pod安全相关选项的一种资源.PodSecurityPolicy定义了一系列pod相要进行在系统中必须满足的约束条件,以衣一些默认的约 ...
- nanonets
https://app.nanonets.com/ List of Models IMAGES Images: Image Categorization Beta Input: Image Out ...