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实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
js中this对象用法分析
Jan 05 Javascript
Express结合Webpack的全栈自动刷新
May 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通用分页类page.php[仿google分页]
2008/08/31 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
JS表的模拟方法
2015/02/05 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
python实现ip查询示例
2014/03/26 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
python如何将图片转换为字符图片
2020/08/19 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
用django设置session过期时间的方法解析
2019/08/05 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
.NET初级开发工程师面试题
2014/04/18 面试题
非常详细的C#面试题集
2016/07/13 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
药学专业大学生自荐信
2013/09/28 职场文书
留学自荐信
2013/10/10 职场文书
学生实习推荐信范文
2013/11/26 职场文书
县委务虚会发言材料
2014/10/20 职场文书
世界遗产导游词
2015/02/13 职场文书