vue.js指令v-for使用及索引获取


Posted in Javascript onNovember 03, 2016

1.v-for

直接上代码。

示例一:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <title></title>
</head>
<body>
 <div id="didi-navigator">
 <ul>
  <li v-for="tab in tabs">
  {{ tab.text }}
  </li>
 </ul>
 </div>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 new Vue({
  el: '#didi-navigator',
  data: {
  tabs: [
   { text: '巴士' },
   { text: '快车' },
   { text: '专车' },
   { text: '顺风车' },
   { text: '出租车' },
   { text: '代驾' }
  ]
  }
 })
 </script>
</body>
</html>

vue.js指令v-for使用及索引获取

2.索引

在 v-for 块内我们能完全访问父组件作用域内的属性,另有一个特殊变量 $index,正如你猜到的,它是当前数组元素的索引:

<ul id="example-2">
 <li v-for="item in items">
 {{ parentMessage }} - {{ $index }} - {{ item.message }}
 </li>
</ul>
var example2 = new Vue({
 el: '#example-2',
 data: {
 parentMessage: 'Parent',
 items: [
 { message: 'Foo' },
 { message: 'Bar' }
 ]
 }
})

vue.js指令v-for使用及索引获取

另外,你可以为索引指定一个别名(如果 v-for 用于一个对象,则可以为对象的键指定一个别名):

<div v-for="(index, item) in items">
 {{ index }} {{ item.message }}
</div>

 

从 1.0.17 开始可以使用 of 分隔符,更接近 JavaScript 遍历器语法:

<div v-for="item of items"></div>

示例二:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <title></title>
</head>
<body>
 <ul>
 <li v-for="option in options">
  <p class="text-success" v-on:click="getIndex($index)">Text:{{option.text}}--Vlue:{{option.value}}</p>
 </li>
 </ul>
 <div v-if="isNaN(click)==false">
 <span>你点击的索引为: {{ click }}</span>
 </div>
 <div v-else>
 <p class="text-danger">试着点击上方LI条目</p>
 </div>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 new Vue({
  el: 'body',
  data: {
  click: 'a',
  options: [
   { text: '上海市', value: '20' },
   { text: '湖北省', value: '43' },
   { text: '河南省', value: '45' },
   { text: '北京市', value: '10' }
  ]
  },
  methods:{
  getIndex:function($index){
   this.click=$index;
  }
  }
 });
 </script>
</body>
</html>

vue.js指令v-for使用及索引获取

3.在点击事件中取到索引

方法一:添加自定义属性

示例三:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  a{display: block;}
 </style>
 </head>
 <body>
 <div>
  <a v-for="(index,item) in items" data-index="{{index}}" v-on:click="onclick" href="http://www.baidu.com">{{ item.text }}</a>
 </div>
 <input type="text" name="" id="index" value=""/>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 new Vue({
  el: 'body',
  data: {
  items: [
   { text: '巴士' },
   { text: '快车' },
   { text: '专车' },
   { text: '顺风车' },
   { text: '出租车' },
   { text: '代驾' }
  ]
  },
  methods: {
  onclick:function(event){
   event.preventDefault();
   let target = event.target
   console.log(target.getAttribute("data-index"));
   document.getElementById('index').value = target.getAttribute("data-index");
  }
  }
 })
 </script>
 </body>
</html>

vue.js指令v-for使用及索引获取

方法二:直接传入索引值

示例四(和二差不多):

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

a{display: block;}

</style>

</head>

<body>

<div>

 <a v-for="(index,item) in items" v-on:click="onclick($index)" href="#">{{ item.text }}</a>

</div>

<input type="text" name="" id="index" value=""/>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

 <script type="text/javascript">

 new Vue({

 el: 'body',

 data: {

 items: [

 { text: '巴士' },

 { text: '快车' },

 { text: '专车' },

 { text: '顺风车' },

 { text: '出租车' },

 { text: '代驾' }

 ]

 },

 methods: {

 onclick:function(index){

// index.preventDefault();

 console.log(index);

 document.getElementById('index').value = index;

}

 }

})

</script>

</body>

</html>

效果与方法一相同。

vue.js指令v-for使用及索引获取

如果想直接传索引可以用以下方法:

示例五:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  a{display: block;}
 </style>
 </head>
 <body>
 <div>
  <a v-for="(index,item) in items" v-on:click="onclick($index)" href="javascript:void(0)">{{ item.text }}</a>
 </div>
 <input type="text" name="" id="index" value=""/>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 new Vue({
  el: 'body',
  data: {
  items: [
   { text: '巴士' },
   { text: '快车' },
   { text: '专车' },
   { text: '顺风车' },
   { text: '出租车' },
   { text: '代驾' }
  ]
  },
  methods: {
  onclick:function(index){
//   index.preventDefault();
   console.log(index);
   document.getElementById('index').value = index;
   window.location.href = "http://www.baidu.com";
  }
  }
 })
 </script>
 </body>
</html>

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
实例:用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
Javascript 编码约定(编码规范)
Mar 11 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue.js初学入门教程(1)
Nov 03 #Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 #Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 #Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 #Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 #Javascript
微信小程序  audio音频播放详解及实例
Nov 02 #Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 #Javascript
You might like
在Windows版的PHP中使用ADO
2006/10/09 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
PHP闭包函数详解
2016/02/13 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python getopt 参数处理小示例
2009/06/09 Python
Python实现把数字转换成中文
2015/06/29 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
计算机毕业生自荐信范文
2014/03/23 职场文书
公司请假条格式
2014/04/11 职场文书
校运会班级霸气口号
2015/12/24 职场文书
vue实现登陆页面开发实践
2022/05/30 Vue.js