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 isArray 数组类型检测函数
Oct 08 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 Javascript
node中使用shell脚本的方法步骤
Mar 23 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和ACCESS写聊天室(七)
2006/10/09 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP函数积累总结
2019/03/19 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
深入研究React中setState源码
2017/11/17 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
浅谈Python的异常处理
2016/06/19 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Python理解递归的方法总结
2019/01/28 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
保送生自荐信范文
2013/10/06 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
母校寄语大全
2014/04/10 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
股指期货心得体会
2014/09/10 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书