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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python Gitlab Api 使用方法
2019/08/28 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
惠普香港官方商店:HP香港
2019/04/30 全球购物
初三班主任寄语大全
2014/04/04 职场文书
租房协议书范本
2014/04/09 职场文书
工作总结与自我评价
2014/09/18 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
初中政治教师教学反思
2016/02/23 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python