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控制日期显示的小例子
Nov 23 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
JavaScript表单验证实现代码
May 22 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
taro开发微信小程序的实践
May 21 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 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
2006/12/14 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
python下10个简单实例代码
2017/11/15 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
电子商务应届生求职信
2013/11/16 职场文书
最新离婚协议书范本
2014/08/19 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
JS class语法糖的深入剖析
2022/07/07 Javascript