2.x版本:

v-for="(item,index) in items"

index即索引值。

==========================分割线==============================

1.x版本:

1.v-for

  示例一:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
</head>
<body>
<div id="didi-navigator">
<ul>
<li v-for="tab in tabs">
{{ tab.text }}
</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#didi-navigator',
data: {
tabs: [
{ text: '巴士' },
{ text: '快车' },
{ text: '专车' },
{ text: '顺风车' },
{ text: '出租车' },
{ text: '代驾' }
]
}
})
</script>
</body>
</html>

2.索引

  在 v-for 块内我们能完全访问父组件作用域内的属性,特殊变量 $index是当前数组元素的索引:

<ul id="example-2">
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})

  另外,你可以为索引指定一个别名(如果 v-for 用于一个对象,则可以为对象的键指定一个别名):

<div v-for="(index, item) in items">
{{ index }} {{ item.message }}
</div>

  从 1.0.17 开始可以使用 of 分隔符,更接近 JavaScript 遍历器语法:

<div v-for="item of items"></div>

  示例二:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
</head>
<body>
<ul>
<li v-for="option in options">
<p class="text-success" v-on:click="getIndex($index)">Text:{{option.text}}--Vlue:{{option.value}}</p>
</li>
</ul>
<div v-if="isNaN(click)==false">
<span>你点击的索引为: {{ click }}</span>
</div>
<div v-else>
<p class="text-danger">试着点击上方LI条目</p>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: 'body',
data: {
click: 'a',
options: [
{ text: '上海市', value: '20' },
{ text: '湖北省', value: '43' },
{ text: '河南省', value: '45' },
{ text: '北京市', value: '10' }
]
},
methods:{
getIndex:function($index){
this.click=$index;
}
}
});
</script>
</body>
</html>

3.在点击事件中取到索引

  方法一:添加自定义属性

  示例三:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{display: block;}
</style>
</head>
<body>
<div>
<a v-for="(index,item) in items" data-index="{{index}}" v-on:click="onclick" href="http://www.baidu.com">{{ item.text }}</a>
</div>
<input type="text" name="" id="index" value=""/>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: 'body',
data: {
items: [
{ text: '巴士' },
{ text: '快车' },
{ text: '专车' },
{ text: '顺风车' },
{ text: '出租车' },
{ text: '代驾' }
]
},
methods: {
onclick:function(event){
event.preventDefault();
let target = event.target
console.log(target.getAttribute("data-index"));
document.getElementById('index').value = target.getAttribute("data-index");
}
}
})
</script>
</body>
</html>

  方法二:直接传入索引值

  示例四(和二差不多):

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

a{display: block;}

</style>

</head>

<body>

<div>

    <a v-for="(index,item) in items" v-on:click="onclick($index)" href="#">{{ item.text }}</a>

</div>

<input type="text" name="" id="index" value=""/>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

     new Vue({

    el: 'body',

    data: {

     items: [

     { text: '巴士' },

     { text: '快车' },

     { text: '专车' },

     { text: '顺风车' },

     { text: '出租车' },

     { text: '代驾' }

     ]

     },

    methods: {

     onclick:function(index){

//      index.preventDefault();

    console.log(index);

    document.getElementById('index').value = index;

}

    }

})

</script>

</body>

</html>

  效果与方法一相同。

  不过有链接时:

  与取索引虽然不冲突,但是如果要对所跳的链接做进一步操作,则无法阻止跳转事件:

  如果想直接传索引可以用以下方法:

  示例五:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{display: block;}
</style>
</head>
<body>
<div>
<a v-for="(index,item) in items" v-on:click="onclick($index)" href="javascript:void(0)">{{ item.text }}</a>
</div>
<input type="text" name="" id="index" value=""/>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: 'body',
data: {
items: [
{ text: '巴士' },
{ text: '快车' },
{ text: '专车' },
{ text: '顺风车' },
{ text: '出租车' },
{ text: '代驾' }
]
},
methods: {
onclick:function(index){
// index.preventDefault();
console.log(index);
document.getElementById('index').value = index;
window.location.href = "http://www.baidu.com";
}
}
})
</script>
</body>
</html>

补充:

4.关于v-for版本2.0与1.x的区别

  2.0版本的示例五:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{display: block;}
</style>
</head>
<body>
<div id="for5">
<a v-for="(item,index) in items" v-on:click="onclick(index)" href="javascript:void(0)">{{ index }}{{ item.text }}</a>
</div>
<input type="text" name="" id="index" value=""/>
<script src="js/vue2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#for5',
data: {
items: [
{ text: '巴士' },
{ text: '快车' },
{ text: '专车' },
{ text: '顺风车' },
{ text: '出租车' },
{ text: '代驾' }
]
},
methods: {
onclick:function(index){
console.log(index);
document.getElementById('index').value = index;
// window.location.href = "http://www.baidu.com";
window.location.href = "#";
}
}
})
</script>
</body>
</html>

  变化如下:

  1. el处需id,写body报错;
  2. 参数index需写在item后面;
  3. 作为事件参数时不用加$符。

  此外,也可以提供第二个的参数为键名:

<div v-for="(value, key) in object">

  {{ key }} : {{ value }}

</div>

  第三个参数为索引:

<div v-for="(value, key, index) in object">

  {{ index }}. {{ key }} : {{ value }}

</div>

vue.js中v-for的使用及索引获取的更多相关文章

  1. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  2. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  3. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  4. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  5. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  6. vue.js中的slot

    vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...

  7. Vue.js中css的作用域

    Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...

  8. vue.js 中 data, prop, computed, method,watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  9. angular.js和vue.js中实现函数去抖(debounce)

    问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...

  10. vue.js 中使用(...)运算符报错的解决方法

    vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...

随机推荐

  1. 【Java EE 学习 19】【使用过滤器实现全站压缩】【使用ThreadLocal模式解决跨DAO事务回滚问题】

    一.使用过滤器实现全站压缩 1.目标:对网站的所有JSP页面进行页面压缩,减少用户流量的使用.但是对图片和视频不进行压缩,因为图片和视频的压缩率很小,而且处理所需要的服务器资源很大. 2.实现原理: ...

  2. 《Spring 3.x 企业应用开发实战》目录

    图书信息:陈雄华 林开雄 编著 ISBN 978-7-121-15213-9 概述: 第1章:对Spring框架进行宏观性的概述,力图使读者建立起对Spring整体性的认识. 第2章:通过一个简单的例 ...

  3. android 相对布局里面的一些属性

    一.   有关于RelativeLayout布局的一些属性 1.  相对于兄弟控件的位置:android:layout_below Android:layout_toLeftof Android:la ...

  4. wp8 入门到精通 定时更新瓷贴

    public class ScheduledAgent : ScheduledTaskAgent { static ScheduledAgent() { Deployment.Current.Disp ...

  5. WPF QuickStart系列之样式和模板(Style and Template)

    在WPF桌面程序中,当我们想构建一个统一的UI表现时(在不同操作系统下,显示效果一致),此时我们就需要使用到WPF中的样式和模板技术.简单来说,如果我们需要简单的给一个Button设置宽,高,Marg ...

  6. 跟着鸟哥学Linux系列笔记3-第11章BASH学习

    跟着鸟哥学Linux系列笔记0-扫盲之概念 跟着鸟哥学Linux系列笔记0-如何解决问题 跟着鸟哥学Linux系列笔记1 跟着鸟哥学Linux系列笔记2-第10章VIM学习 认识与学习bash 1. ...

  7. ios编码转换 国标 UTF-8

    我们知道,使用NSURLConnection的代理方法下载网页,存到一个NSData中, NSMutableData *pageData; [pageData appendData:data]; 如果 ...

  8. DIV伸缩盒子box

    <div class="div1"> <div class="box"> <div>A</div> <di ...

  9. 初识WCF

    以前,总是说自己的基础知识不牢靠,就是因为自己总是不总结.昨天,学费交了,顿时感觉不一样了,心里有劲也有力了,知道了以前的自己到底为什么会那样了,因为没有压力. --题记 我参加过浩哥的招标项目,参加 ...

  10. loadrunner处理HTTP重定向请求

    //place this in global.h     int HttpRetCode;  int i=0;  char depthVal[10];  char cTransactName[2000 ...