Maison > Article > interface Web > Comment utiliser v-for dans vue.js et comment obtenir l'index ?

Comment utiliser v-for dans vue.js et comment obtenir l'index ?

青灯夜游avant: 2020-11-02 17:57:505946parcourir

La colonne Tutoriel Vue.js suivante vous guidera à travers l'utilisation de v-for et l'acquisition d'index dans vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Version 2.x :

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

index est la valeur de l'index.

==========================Ligne de séparation================ ==============

Version 1.x :

1 .v-for

Exemple 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>
    <p id="didi-navigator">
        <ul>
            <li v-for="tab in tabs">
                {{ tab.text }}            </li>
        </ul>
    </p>
    <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>

2. Index

Dans le bloc v-for, nous avons un accès complet aux propriétés dans la portée du composant parent. La variable spéciale $index est l'index de l'élément actuel du tableau :

<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' }
    ]
  }
})

De plus, vous pouvez spécifier un alias pour l'index (si v-for est utilisé pour un objet, vous pouvez spécifier un alias pour la clé de l'objet) ：

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

À partir de la version 1.0.17, vous pouvez utiliser le délimiteur of, qui est plus proche de la syntaxe du traverseur JavaScript :

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

Exemple 2 :

<!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>
    <p v-if="isNaN(click)==false">
        <span>你点击的索引为: {{ click }}</span>
    </p>
    <p v-else>
        <p class="text-danger">试着点击上方LI条目</p>
    </p>
    <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>

3. Obtenez l'index dans l'événement clic

Méthode 1 : Ajouter des attributs personnalisés

Exemple 3 :

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a{display: block;}
        </style>
    </head>
    <body>
        <p>
               <a v-for="(index,item) in items" data-index="{{index}}" v-on:click="onclick" href="http://www.baidu.com">{{ item.text }}</a>
        </p>
        <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>

Méthode 2 : Passer le valeur d'index directement

Exemple quatre (similaire à la deuxième méthode) :

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">a{display: block;}</style></head><body><p>

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

L'effet est le même que celui de la première méthode.

Mais quand il y a un lien :

Bien que ce ne soit pas le cas conflit avec l'indexation , mais si vous souhaitez effectuer d'autres opérations sur le lien sauté, vous ne pouvez pas empêcher l'événement de saut :

Si vous souhaitez directement Les méthodes suivantes peuvent être utilisées pour transférer l'index :

Exemple 5 :

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a{display: block;}
        </style>
    </head>
    <body>
        <p>
               <a v-for="(index,item) in items" v-on:click="onclick($index)" href="javascript:void(0)">{{ item.text }}</a>
        </p>
        <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>

Supplémentaire :

4. À propos de la différence entre v-pour la version 2.0 et 1.x

Exemple 5 de la version 2.0 :

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

Les changements sont les suivants :

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

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

<p v-for="(value, key) in object">

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

　　第三个参数为索引：

<p v-for="(value, key, index) in object">

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

相关推荐：

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：En savoir plus sur les propriétés calculées dans vueArticle suivant：En savoir plus sur les propriétés calculées dans vue

Articles Liés

Voir plus