Home > Article > Web Front-end > vue.js instruction v-for usage and index acquisition

vue.js instruction v-for usage and index acquisition

高洛峰Original: 2016-12-08 09:43:552003browse

1.v-for

　 Directly upload the code.

Example 1:

<!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: &#39;#didi-navigator&#39;,
  data: {
  tabs: [
   { text: &#39;巴士&#39; },
   { text: &#39;快车&#39; },
   { text: &#39;专车&#39; },
   { text: &#39;顺风车&#39; },
   { text: &#39;出租车&#39; },
   { text: &#39;代驾&#39; }
  ]
  }
 })
 </script>
</body>
</html>

2. Index

Within the v-for block we can fully access the properties in the parent component scope, and there is also a special variable $index, as you guessed, It is the index of the current array element:

<ul id="example-2">
 <li v-for="item in items">
 {{ parentMessage }} - {{ $index }} - {{ item.message }}
 </li>
</ul>

var example2 = new Vue({
 el: &#39;#example-2&#39;,
 data: {
 parentMessage: &#39;Parent&#39;,
 items: [
 { message: &#39;Foo&#39; },
 { message: &#39;Bar&#39; }
 ]
 }
})

Alternatively, you can specify an alias for the index (if v-for is used with an object, you can specify an alias for the object's key):

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

Starting from 1.0.17, you can use the of delimiter, which is closer to JavaScript traverser syntax:

36389ae809f64b5de1b3d3d97208d92616b28748ea4df4d9c2150843fecfba68

Example Two:

<!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: &#39;body&#39;,
  data: {
  click: &#39;a&#39;,
  options: [
   { text: &#39;上海市&#39;, value: &#39;20&#39; },
   { text: &#39;湖北省&#39;, value: &#39;43&#39; },
   { text: &#39;河南省&#39;, value: &#39;45&#39; },
   { text: &#39;北京市&#39;, value: &#39;10&#39; }
  ]
  },
  methods:{
  getIndex:function($index){
   this.click=$index;
  }
  }
 });
 </script>
</body>
</html>

3. Get the index in the click event

Method 1: Add custom attributes

Example 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: &#39;body&#39;,
  data: {
  items: [
   { text: &#39;巴士&#39; },
   { text: &#39;快车&#39; },
   { text: &#39;专车&#39; },
   { text: &#39;顺风车&#39; },
   { text: &#39;出租车&#39; },
   { text: &#39;代驾&#39; }
  ]
  },
  methods: {
  onclick:function(event){
   event.preventDefault();
   let target = event.target
   console.log(target.getAttribute("data-index"));
   document.getElementById(&#39;index&#39;).value = target.getAttribute("data-index");
  }
  }
 })
 </script>
 </body>
</html>

Method 2: Directly pass in the index Value

Example 4 (similar to 2):

<!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: &#39;body&#39;,
 
 data: {
 
 items: [
 
 { text: &#39;巴士&#39; },
 
 { text: &#39;快车&#39; },
 
 { text: &#39;专车&#39; },
 
 { text: &#39;顺风车&#39; },
 
 { text: &#39;出租车&#39; },
 
 { text: &#39;代驾&#39; }
 
 ]
 
 },
 
 methods: {
 
 onclick:function(index){
 
// index.preventDefault();
 
 console.log(index);
 
 document.getElementById(&#39;index&#39;).value = index;
 
}
 
 }
 
})
 
</script>
 
</body>
 
</html>

　 The effect is the same as method 1.

If you want to directly transfer the index, you can use the following method:

Example 5:

<!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: &#39;body&#39;,
  data: {
  items: [
   { text: &#39;巴士&#39; },
   { text: &#39;快车&#39; },
   { text: &#39;专车&#39; },
   { text: &#39;顺风车&#39; },
   { text: &#39;出租车&#39; },
   { text: &#39;代驾&#39; }
  ]
  },
  methods: {
  onclick:function(index){
//   index.preventDefault();
   console.log(index);
   document.getElementById(&#39;index&#39;).value = index;
   window.location.href = "http://www.baidu.com";
  }
  }
 })
 </script>
 </body>
</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：vue custom instructions implement v-tap plug-inNext article：vue custom instructions implement v-tap plug-in

See more

vue.js instruction v-for usage and index acquisition

Related articles