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

 更新时间:2019年01月31日 10:53:38   作者:LDH-  
今天小编就为大家分享一篇关于vue.js指令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>

总结

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

相关文章

  • vue3中defineProps传值使用ref响应式失效详解

    vue3中defineProps传值使用ref响应式失效详解

    这篇文章主要给大家介绍了关于vue3中defineProps传值使用ref响应式失效的相关资料,文章通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • 使用Vue实现带拖动和播放功能的时间轴

    使用Vue实现带拖动和播放功能的时间轴

    这篇文章主要为大家详细介绍了如何使用Vue实现带拖动和播放功能的时间轴,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • Vue实现导出excel表格功能

    Vue实现导出excel表格功能

    这篇文章主要介绍了Vue实现导出excel表格的功能,在文章末尾给大家提到了vue中excel表格的导入和导出代码,需要的朋友可以参考下
    2018-03-03
  • Vue的Class与Style绑定的方法

    Vue的Class与Style绑定的方法

    本篇文章主要介绍了Vue的Class与Style绑定的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue如何获取表单数据

    Vue如何获取表单数据

    我们在做后台管理系统里面有非常多的表单需求,下面这篇文章主要给大家介绍了关于Vue如何获取表单数据的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue中let that=this的作用及说明

    vue中let that=this的作用及说明

    这篇文章主要介绍了vue中let that=this的作用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue项目打包优化实践指南(推荐!)

    Vue项目打包优化实践指南(推荐!)

    如果引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验,这篇文章主要给大家介绍了关于Vue项目打包优化实践的相关资料,需要的朋友可以参考下
    2022-06-06
  • vue如何实现文件上传及预览

    vue如何实现文件上传及预览

    这篇文章主要介绍了vue如何实现文件上传及预览问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue.js根据图片url进行图片下载

    vue.js根据图片url进行图片下载

    最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,本文就介绍了vue.js根据图片url进行图片下载,感兴趣的可以了解一下
    2021-06-06
  • Vue3 跨域配置devServer的参数和设置方法

    Vue3 跨域配置devServer的参数和设置方法

    这篇文章主要介绍了Vue3 跨域配置devServer的参数和设置,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04

最新评论