How to use v-for in vue.js and how to get the index?

The followingVue.js tutorial column will take you through the use of v-for and index acquisition in vue.js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

2.x version:

v-for="(item,index) in items"

index is the index value.

==========================Separating line================ ==============

1.x version:

1 .v-for

Example 1:

nbsp;html>
    <meta>
    <meta>
    <title></title>
    <p>
        </p>

            
•                 {{ tab.text }}            
        

         <script></script>     <script> 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>

##2. Index

Within the v-for block we have full access to the properties in the parent component scope. The special variable $index is the index of the current array element:

  
•     {{ parentMessage }} - {{ $index }} - {{ item.message }}  

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

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

<p>
  {{ index }} {{ item.message }}</p>

Starting from 1.0.17, you can use of delimiter, which is closer to JavaScript traverser syntax: <p></p>

<p></p>

Example 2:

nbsp;html>
    <meta>
    <meta>
    <title></title>
    

        
•             

  Text:{{option.text}}--Vlue:{{option.value}}

          
    

    

        你点击的索引为: {{ click }}     

    

        

试着点击上方LI条目

         <script></script>     <script> 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>

3. Get the index in the click event

Method 1: Add custom attributes

Example 3:

nbsp;html>
    
        <meta>
        <title></title>
        <style>
            a{display: block;}
        </style>
    
    
        <p>
               <a>{{ item.text }}</a>
        </p>
        <input>
    <script></script>
    <script>
        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>
    

# Method 2: Pass in the index value directly

Example four (similar to method two):

nbsp;html><meta><title></title><style>a{display: block;}</style><p>

    <a>{{ item.text }}</a></p><input><script></script>

    <script>

     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>

The effect is the same as method one.

But when there is a link:

Although it does not conflict with indexing , but if you want to perform further operations on the jumped link, you cannot prevent the jump event:

If you want to directly The following methods can be used to transfer the index:

Example 5:

nbsp;html>
    
        <meta>
        <title></title>
        <style>
            a{display: block;}
        </style>
    
    
        <p>
               <a>{{ item.text }}</a>
        </p>
        <input>
    <script></script>
    <script>
        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>
    

Supplement:

4. About the difference between v-for version 2.0 and 1.x

Example 5 of version 2.0:

nbsp;html>
    
        <meta>
        <title></title>
        <style>
            a{display: block;}
        </style>
    
    
        <p>
            <a>{{ index }}{{ item.text }}</a>
        </p>
        <input>
    <script></script>
    <script>
        new Vue({
            el: &#39;#for5&#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){
                    console.log(index);
                    document.getElementById(&#39;index&#39;).value = index;//                  window.location.href = "http://www.baidu.com";                    window.location.href = "#";
                }
            }
        })    </script>
    

The changes are as follows:

1. el处需id，写body报错；
2. 参数index需写在item后面；
3. 作为事件参数时不用加$符。

　　此外，也可以提供第二个的参数为键名：

<p>

  {{ key }} : {{ value }}</p>

　　第三个参数为索引：

<p>

  {{ index }}. {{ key }} : {{ value }}</p>

 

 

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程教学！！

The above is the detailed content of How to use v-for in vue.js and how to get the index?. For more information, please follow other related articles on the PHP Chinese website!