vue.js指令v-for使用及索引获取

1.v-for

直接上代码。

示例一：

！DOCTYPE html html head meta charset=' utf-8 ' meta name=' viewport ' content=' initial-scale=1.0，maximum-scale=1.0，user-scale=no '/title/title/heady div id=' Didi-navigator ' ul Li v-for='选项卡中的选项卡{ tab。text } }/Li/ul/div脚本src=' http 3360 js/Vue。js ' type=' text/JAVAScript ' charset=' utf-8 '/巴士}，{ text: '快车}，{ text: '专车}，{ text: '顺风车}，{ text: '出租车}，{ text: '代驾}]} })/脚本/正文/html

2.索引

在v-for块内我们能完全访问父组件作用域内的属性，另有一个特殊变量$索引，正如你猜到的，它是当前数组元素的索引：

ul id=' example-2 ' Li v-for=' items“{ Parentmessage } }-{ $ index } }-{ { item。message } }/Li/ulvar example 2=new Vue({ El : ' # example-2 '，data : { Parent message : ' Parent '，items: [ { message: 'Foo' }，{ message : ' Bar ' })(9501 . 163.com)

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

items“{ index } } { { items。消息} }/div中的div v-for='(索引，项目)从1.0.17 开始可以使用关于分隔符，更接近Java脚本语言遍历器语法：

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-scale=no '/title/title/head dy ul Li v-for=' option '选项中的p class=' text-success ' v-: click=' GetIndex($ index)' text : { { option。text } }-Vlue : { { option }。价值} }/p/Li/ul你点击的索引为： { { click } }/span/div div v-else p class=' text-danger '试着点击上方里条目/p /div脚本src=' http : js/Vue。js ' type=' text/JAVAScript ' charset=' utf-8 '/脚本脚本类型=' text/JavaScript ' new Vue({ El : ' body '，data: { click: 'a '，options: [ { text: '上海市，value: '20' }，{ text: '湖北省，value: '43' }，{ text: '河南省，value: '45' }，{ text: '北京市，value: '10' } ] }，方法： { GetIndex : FuncTion($ index){ this。click=$ index} } });/脚本/正文/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)items ' data-index=' { { index } } ' v-: click=' onclick ' href=' http://www。百度。com“{ item。文本} }/a/div输入类型=' text ' name=' id=' index ' value=' '/script src=' http : js/Vue。js ' type=' text/JavaScript ' charset=' utf-8巴士}，{ text: '快车}，{ text: '专车}，{ text: '顺风车}，{ text: '出租车}，{ text: '代驾} ] }，方法： { onclick :函数(事件){ event。prevent default()；让目标=事件。目标控制台。日志(目标。GetAttribute(' data-index ')；document.getElementById('index ').值=目标。GetAttribute(' data-index ')；} } })/脚本/正文/html

方法二：直接传入索引值

示例四（和二差不多):

！DOCTYPE html html heartheta charset=' UTF-8 ' title/title style type=' text/CSS ' a { display : block；}/style/head dydiv a v-for='(index，item)items ' v-: click=' onclick($ index)' href=' # ' { { item。text } }/a/divinput type=' text ' name=' id=' index ' value=' '/script src=' http : js/Vue。js ' type=' text/JAVAScript ' charset=' utf-8 '/script脚本类型=' text/JavaScript ' new Vue巴士}，{ text: '快车}，{ text: '专车}，{ text: '顺风车}，{ text: '出租车}，{ text: '代驾} ] }，方法： { onclick :函数(index){//index。prevent default()；console.log(索引);document.getElementById('index ').值=索引；} } })/脚本/正文/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)items ' v-: click=' onclick($ index)' href=' JavaScript : void(0)' { { item。文本} }/a/div输入类型=' text ' name=' id=' index ' value=' '/script src=' http : js/Vue。js ' type=' text/JAVAScript ' charset=' utf-8 '/脚本脚本类型='巴士}，{ text: '快车}，{ text: '专车}，{ text: '顺风车}，{ text: '出租车}，{ text: '代驾} ] }，方法： { onclick :函数(index){//index。prevent default()；console.log(索引);document.getElementById('index ').值=索引；窗户。位置。http://。百度。com '；} } })/脚本/正文/html本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。