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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
ajax与302响应代码测试
Oct 23 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
深入理解Python中的super()方法
2017/11/20 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python中使用print输出中文的方法
2018/07/16 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
办公室主任岗位职责
2015/01/31 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
Mysql 设置boolean类型的操作
2021/06/04 MySQL