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的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
vue如何使用rem适配
Feb 06 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
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
python发送arp欺骗攻击代码分析
2014/01/16 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Python函数基本使用原理详解
2020/03/19 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Django URL参数Template反向解析
2020/11/24 Python
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
护士毕业实习感言
2014/03/05 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Mysql中常用的join连接方式
2022/05/11 MySQL
Redis过期数据是否会被立马删除
2022/07/23 Redis