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读取URL参数小例子
Aug 30 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 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脚本的10个技巧(3)
2006/10/09 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php命令行用法入门实例教程
2014/10/27 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python探索之SocketServer详解
2017/10/28 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
django正续或者倒序查库实例
2020/05/19 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
特步官方商城:Xtep
2017/03/21 全球购物
《独坐敬亭山》教学反思
2014/04/08 职场文书
应用外语系自荐信
2014/06/26 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
股指期货心得体会
2014/09/10 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
标准单位租车协议书
2014/09/23 职场文书
教师群众路线心得体会
2014/11/04 职场文书
幼儿园开学通知
2015/04/24 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书