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 相关文章推荐
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
小程序实现留言板
Nov 02 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 Javascript
小程序实现文字循环滚动动画
Jun 14 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
php上传excel表格并获取数据
2017/04/27 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
python中正则表达式的使用方法
2018/02/25 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
keras.layer.input()用法说明
2020/06/16 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
数学系毕业生的自我评价
2014/01/10 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
如何写辞职书
2015/02/26 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
班主任工作总结范文
2015/08/13 职场文书
放假通知怎么写
2015/08/18 职场文书
人事任命书范本
2015/09/21 职场文书
商业计划书格式、范文
2019/03/21 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python