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.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
一个颜色轮换的简单例子
2006/10/09 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
js加解密 脚本解密
2008/02/22 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
python实现中文文本分句的例子
2019/07/15 Python
python flask中动态URL规则详解
2019/11/22 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
详细分析Python垃圾回收机制
2020/07/01 Python
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
骨干教师培训感言
2014/01/16 职场文书
小学教师评语大全
2014/04/23 职场文书
法制宣传标语集锦
2014/06/25 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
解析目标检测之IoU
2021/06/26 Python