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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
PassWord输入框代码分享
Jun 07 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
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 Cookie的使用教程详解
2013/06/03 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php数组去重复数据示例
2014/02/25 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
vue实现购物车列表
2020/06/30 Javascript
JavaScript如何操作css
2020/10/24 Javascript
python解析xml文件操作实例
2014/10/05 Python
python实现一次创建多级目录的方法
2015/05/15 Python
Python实现12306火车票抢票系统
2019/07/04 Python
python障碍式期权定价公式
2019/07/19 Python
python 读取修改pcap包的例子
2019/07/23 Python
Python Http请求json解析库用法解析
2020/11/28 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
历史专业个人求职信范文
2013/12/07 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
《赶海》教学反思
2014/04/20 职场文书
工程项目合作意向书
2015/05/08 职场文书
刘胡兰观后感
2015/06/16 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript