vue.javascript指令v-for如何使用以及下标索引的获取

迷离的夜空,灰黑色的天际悬着一轮金色的孤舟,载着满仓的梦想,驶向云层深处;凉风微微的吹袭着黑夜的素纱,掸掉岁月的风尘;融融的月光静静的流淌,冲断记忆的决堤;零星点点,柔柔的洒在树叶上,泛出浅浅的绿;如华的银色裹住一丝清凉,铺设一地的奢华。

在v-for代码块中,我们可以完全地访问父级作用域下的属性。

v-for还支持可选的第二个参数,作为当前项的索引。

也可以使用v-for来遍历对象的属性。

还可以提供第二个参数,作为对象的键名(key):

<body> 
<div id="box"> 
  <ul> 
    <li @click="onclick(index)" v-for="(item,index) in dataList">{{item.name}}</li> 
  </ul> 
</div> 
</body> 
<script src="assets/vue/vue.js"></script> 
<script> 
  new Vue({ 
    el:"#box", 
    data:{ 
      dataList:[ 
        {name:"子鼠"}, 
        {name:"丑牛"}, 
        {name:"寅虎"}, 
        {name:"卯兔"}, 
        {name:"辰龙"} 
      ] 
    }, 
    methods:{ 
      onclick:function(index){ 
        alert(index); 
      } 
    } 
  }) 
</script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明