vue.js中使用v

您所在的位置：网站首页 › list获取索引 › vue.js中使用v

vue.js中使用v

2023-09-05 21:55| 来源: 网络整理| 查看: 265

下面Vue.js教程栏目带大家了解一下vue.js中v-for的使用及索引获取。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

2.x版本：

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

index即索引值。

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

1.x版本：

1.v-for

　　示例一：

new Vue({ el: '#didi-navigator', data: { tabs: [ { text: '巴士' }, { text: '快车' }, { text: '专车' }, { text: '顺风车' }, { text: '出租车' }, { text: '代驾' } ] } })

2.索引

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

{{ parentMessage }} - {{ $index }} - {{ item.message }} var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })

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

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

　　示例二：

Text:{{option.text}}--Vlue:{{option.value}}

你点击的索引为: {{ click }}

试着点击上方LI条目

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; } } });

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

　　方法一：添加自定义属性

　　示例三：

a{display: block;}

【本文地址】

vue.js中使用v

vue.js中使用v

今日新闻

推荐新闻