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 操作表格实现代码(多种操作打包)
Mar 20 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php实现的简单日志写入函数
2015/03/31 PHP
php操作MongoDB类实例
2015/06/17 PHP
WordPress网站性能优化指南
2015/11/18 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
php输出图像的方法实例分析
2017/02/16 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
公司活动总结范文
2014/07/01 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技