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


Posted in Javascript onJanuary 31, 2019

在 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.js指令v-for使用以及下标索引的获取

总结

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

Javascript 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
Javascript中的数学函数集合
May 08 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
微信小程序开发的基本流程步骤
Jan 31 #Javascript
JSON的parse()方法介绍
Jan 31 #Javascript
JSON.stringify()方法讲解
Jan 31 #Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 #Javascript
vue中的mvvm模式讲解
Jan 31 #Javascript
Vue和React组件之间的传值方式详解
Jan 31 #Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 #Javascript
You might like
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
javascript折半查找详解
2015/01/26 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
python mysqldb连接数据库
2009/03/16 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Python3简单实现串口通信的方法
2019/06/12 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python如何实现异步调用函数执行
2019/07/08 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
几道数据库的面试题或笔试题
2014/05/31 面试题
普通大学毕业生自荐信
2013/11/04 职场文书
药学专业大学生个人的自我评价
2013/11/04 职场文书
个人现实表现材料
2014/02/04 职场文书
建议书怎么写
2014/03/12 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
《开国大典》教学反思
2014/04/19 职场文书
群众路线对照检查材料
2014/09/22 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书