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将string类型转换int类型
Dec 09 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
JavaScript 数组去重详解
Sep 15 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
详解python单例模式与metaclass
2016/01/15 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
python实现图像外边界跟踪操作
2020/07/13 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
电脑饰品店的创业计划书
2014/01/21 职场文书
农村婚礼主持词
2014/03/13 职场文书
人资专员岗位职责
2014/04/04 职场文书
酒店节能降耗方案
2014/05/08 职场文书
服务行业演讲稿
2014/09/02 职场文书
高中教师个人总结
2015/02/10 职场文书
公司员工辞职信范文
2015/05/12 职场文书
文艺晚会开场白
2015/05/29 职场文书
让生命充满爱观后感
2015/06/08 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server