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 风格的HTML文本转义
Jul 01 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
jquery 插件学习(五)
Aug 06 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
如何更好的编写js async函数
May 13 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 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 session
2013/10/28 PHP
php之readdir函数用法实例
2014/11/13 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
python opencv实现简易画图板
2020/08/27 Python
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
请介绍一下Ant
2016/07/22 面试题
会计电算化专业毕业生推荐信
2013/12/24 职场文书
优秀演讲稿范文
2013/12/29 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
高三英语复习计划
2015/01/19 职场文书