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 相关文章推荐
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
奇妙的js
2007/09/24 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
浅谈python数据类型及类型转换
2017/12/18 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
python自动生成sql语句的脚本
2021/02/24 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
企业军训感想
2014/02/07 职场文书
教师党员一句话承诺
2014/03/28 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
教师节获奖感言
2015/07/31 职场文书