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 相关文章推荐
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
jquery 常用操作方法
Jan 28 Javascript
JavaScript 事件系统
Jul 22 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
原生js+canvas实现验证码
Nov 29 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发送邮件类代码附详细说明
2008/07/10 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
解密效果
2006/06/23 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
javascript实现动态标签云
2015/10/16 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
djang常用查询SQL语句的使用代码
2019/02/15 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Flask配置Cors跨域的实现
2019/07/12 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
仓库规划计划书
2014/04/28 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
如何用python清洗文件中的数据
2021/06/18 Python
golang生成vcf通讯录格式文件详情
2022/03/25 Golang