vue.js中怎么使用v-for
创始人
2024-11-22 11:23:00
0次

2.x版本:

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

index即索引值。

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

1.x版本:

1.v-for

  示例一:


    
    
    
    

  • {{ tab.text }}

vue.js中怎么使用v-for

2.索引

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

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

vue.js中怎么使用v-for

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

{{ index }} {{ item.message }}

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

  示例二:


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

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

试着点击上方LI条目

vue.js中怎么使用v-for

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

  方法一:添加自定义属性

  示例三:


    
        
        
        
    
    
        

{{ item.text }}

vue.js中怎么使用v-for

  方法二:直接传入索引值

  示例四(和二差不多):

{{ item.text }}

  效果与方法一相同。

  不过有链接时:

vue.js中怎么使用v-for

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

vue.js中怎么使用v-for

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

  示例五:


    
        
        
        
    
    
        

{{ item.text }}

补充:

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

  2.0版本的示例五:


    
        
        
        
    
    
        

{{ index }}{{ item.text }}

  变化如下:

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

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

{{ key }} : {{ value }}

  第三个参数为索引:

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

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...