Explication détaillée de la commande Vue Rendering List : v-for

Dans le article précédent, nous avons appris comment rendre conditionnellement les éléments ou modèles DOM requis dans Vue via v-if et v-show . Dans les projets réels, nous rencontrons souvent des éléments tels que des listes qui restituent des tableaux ou des objets dans des données JSON. Dans Vue, une instruction v-for est fournie pour rendre une liste. (Partage de vidéos d'apprentissage : vue vidéo tutorielv-if和v-show根据条件渲染所需要的DOM元素或者模板。在实际的项目中，我们很多时候会碰到将JSON数据中的数组或对象渲染出列表之类的元素。在Vue中，提供了一个v-for的指令，可以渲染列表。（学习视频分享：vue视频教程）

v-for 的作用

---

v-for可以基于源数据多次渲染元素或模板块。这个指令必须用特定的语法alias in expression，为当前遍历的元素提供别名：

<div v-for="alias in expression"> {{ alias }}</div>

一般都是给数组或对象指定别名，除此之外还可以为索引值指定别名，对于对象还可以给value指定别名，常见的几种情形如下：

<div v-for="item in items">{{ item }}</div>
<div v-for="(item, index) in items">{{ item }} {{ index }}</div>
<div v-for="val in object"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

其中我们也可以把in换成of作为分隔符，因为它是最接近JavaScript迭代器的语法。

v-for的默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个key的特殊属性：

<div v-for="itme in items" :key="item.id"> {{ item.text }}</div>

接下来，我们看看v-for的一些使用场景。

一个数组的 v-for

---

使用v-for指令把数组的选项列表进行渲染。v-for指令需要使用item in items形式的特殊语法，items是源数据数组，item是数组元素迭代的别名。来看一个简单的示例：

<!-- Template -->
<ul>
    <li v-for="item in items">{{ item }}</li>
</ul>

// JavaScript
var app = new Vue({
    el: &#39;#app&#39;,
    data: {
        items: [1, 34, 89, 92, 45, 76, 33]
    }
})

这个时候，数组items的每个item渲染到对应的li中，在浏览器看到的效果如下：

上面的例子是通过v-for把数组items的每个项迭代出来放到li中，除此之外，还可以把数组的每个index也遍历出来。在上面的代码的基础上，咱们修改一下模板：

<ul>
    <li v-for="(item, index) in items">index-{{ index }}: {{ item }}</li>
</ul>

这个时候数组的索引号也遍历出来了：

从上面的示列看出来了，你需要哪个元素（HTML的标签）循环，那么v-for就写在那个元素上。

上面我们已经可以正常的使用v-for将定义的数组每一项输出来。为了加深学习，咱们在上面的示例基础上增加一项需求，就是对输出的数组进行排序。这个时候，咱们需要使用到Vue中的computed属性。

在Vue中，我们不能污染源数据，如果我们直接对源数据items通过sort()方法进行排序，将会报错的：

var app = new Vue({
    el: '#app',
    computed: {
        items: function() {
            return this.items.sort()
        }
    },
    data: {
        items: [1, 34, 89, 92, 45, 76, 33]
    }
})

为了不会污染Vue中的源数据，需要在computed里重新声明一个对象，比如声明一个sortItems对象：

var app = new Vue({
    el: '#app',
    computed: {
        sortItems: function() {
            return this.items.sort()
        }
    },
    data: {
        items: [1, 34, 89, 92, 45, 76, 3, 12]
    }
})

这个时候，我们的模板也需要做对应的修改：

<ul>
    <li v-for="item in sortItems">{{ item }}</li>
</ul>

如果不出意外的话，你看到的效果将是这样的：

虽然有变化了，但不是我们想要的排序结果。虽然结果不是我们想要的，但这并不是Vue自身的问题，在JavaScript中也是这样。如果我们要想真正的实现一个排序效果，那么需要添加一个JavaScript的数组的排序函数的功能：

function sortNumber(a, b) {
    return a - b
}

把computed)

v-for

---

v-for peut restituer des éléments ou des blocs de modèles plusieurs fois en fonction de données sources. Cette instruction doit utiliser une syntaxe spécifique alias dans l'expression pour fournir un alias pour l'élément actuellement parcouru :

computed: {
    sortItems: function() {
        return this.items.sort(sortNumber)
    }
}

Généralement, les alias sont spécifiés pour les tableaux ou les objets. De plus, les alias peuvent également être spécifiés pour les valeurs d'index. . , pour les objets, vous pouvez également spécifier des alias pour value. Les situations courantes sont les suivantes :

data: {
    objItems: [
        {
            firstName: 'Jack',
            lastName: 'Li',
            age: 34
        },
        {
            firstName: 'Airen',
            lastName: 'Liao',
            age: 18
        }
    ]
}

Nous pouvons également remplacer in par of. comme délimiteur car c'est la syntaxe la plus proche des itérateurs JavaScript.

Le comportement par défaut de v-for tente de ne pas changer le tout, mais de remplacer des éléments. Pour forcer la réorganisation des éléments, vous devez fournir un attribut spécial de key :

 <li v-for="objItem in objItems">{{ objItem.firstName }} {{objItem.lastName}} is {{ objItem.age}} years old!</li>

Ensuite, examinons quelques scénarios d'utilisation de v-for.

Un tableau de v-for

---

Utilisez la commande v-for pour lister les options du tableau À restituer. La directive v-for nécessite une syntaxe spéciale sous la forme de item in items, items est le tableau de données source et item< /code> est un alias pour l'itération des éléments du tableau. Regardons un exemple simple : <img src="https://img.php.cn/upload/article/000/000/024/7f8f142ead7cad31f4770ed733af4077-5.png" alt=""/><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">Vue.set(app.items, indexOfItem, newValue) app.items.splice(indexOfItem, 1, newValue)</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div></p>À ce moment, chaque <code>item du tableau items est rendu au li correspondant, et dans le navigateur L'effet que vous voyez est le suivant : 🎜🎜🎜 🎜L'exemple ci-dessus Il utilise v-for pour parcourir chaque élément du tableau items et le placer dans li. mettez également le Chaque index est également parcouru. Sur la base du code ci-dessus, modifions le modèle : 🎜

app.items.splice(newLength)

🎜À ce moment, le numéro d'index du tableau est également parcouru : 🎜🎜🎜🎜Comme vous pouvez le voir dans la liste ci-dessus, quel élément (balise HTML) vous devez boucler, puis v-for va écrire sur cet élément. 🎜🎜Nous pouvons déjà utiliser v-for normalement pour afficher chaque élément du tableau défini. Afin d'approfondir notre apprentissage, nous ajoutons une exigence basée sur l'exemple ci-dessus, qui consiste à trier le tableau de sortie. Pour le moment, nous devons utiliser l'attribut computed dans Vue. 🎜🎜Dans Vue, nous ne pouvons pas polluer les données sources. Si nous trions directement les éléments de données sources via la méthode sort(), une erreur sera signalée : 🎜

<!-- Template -->
<ul>
    <li v-for="value in obj">{{ value }}</li>
</ul>

// JavaScript
obj: {
    firstName: &#39;Airen&#39;,
    lastName: &#39;Liao&#39;,
    age: 30
}

🎜🎜🎜Afin de ne pas polluer les données sources dans Vue, vous devez re-déclarer un objet dans calculé< /code>, tel que Déclarer un objet <code>sortItems : 🎜

<ul>
    <li v-for="(value, key) in obj">{{ key }}: {{ value }}</li>
</ul>

🎜À ce stade, notre modèle doit également être modifié en conséquence : 🎜

<ul>
    <li v-for="(value, key, index) in obj">{{ index }}. {{ key }}: {{ value }}</li>
</ul>

🎜Si rien d'autre ne se passe, l'effet que vous voyez sera comme ceci : 🎜🎜< img src="https://img.php.cn/upload/article/000/000/024/1ef53d74e24119e1b0bf735f197b790a-3.png" alt=""/>🎜🎜Bien qu'il y ait eu un changement, il n'est pas l'ordre que nous souhaitons. Bien que le résultat ne soit pas celui que nous souhaitons, ce n'est pas un problème avec Vue lui-même, il en va de même en JavaScript. Si nous voulons vraiment obtenir un effet de tri, nous devons ajouter une fonction de tri de tableau JavaScript : 🎜

var app = new Vue({
    data: {
        obj: {
            name: 'Airen'
        }
    }
})

🎜Apportez une modification correspondante au code dans calculé : 🎜

Vue.set(app.obj, 'age', 27)

🎜Ceci L'effet de sortie de phase est vraiment un effet de tri correct : 🎜🎜🎜🎜🎜Dans l'exemple ci-dessus, ce que nous voyons est un simple tableau de nombres purs, et chaque élément du tableau peut également être un objet, par exemple : 🎜

mounted(){
    this.$set(this.obj, '职位', '码农')
}

🎜Nous changeons le modèle en : 🎜

Object.assign(this.obj, {
    age: 27,
    favoriteColor: 'Vue Green'
})

🎜L'effet que nous constatons en ce moment est le suivant : 🎜🎜🎜🎜🎜

在JavaScript中，我们有很多数组的方法，可以对数组进行操作，这些方法可以修改一个数组。其实，在Vue中同样包含一组观察数组变异方法，这些方法将会触发元素的重新更新（视图更新），这些方法也是JavaScript中数组中常看到的方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()。我们可以在控制台中简单的看一下前面的示例中items数组调用变异方法的效果：

Vue不但提供了数组变异的方法，还提供了替换数组的方法。变异方法可以通过些方法的调用修改源数据中的数组；除此之外也有对应的非变异方法，比如filter()、concat()和slice()等。这些方法是不会改变源数据中的原始数组，但总是返回一个新数组。当使用这些方法时，可以用新数组替换旧数组。

由于JavaScript的限制，Vue不能检测以下变动的数组：

• 当你利用索引直接设置一个项时，例如app.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如： app.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和app.items[indexOfItem = newValue相同的效果，同时也将触发状态更新：

Vue.set(app.items, indexOfItem, newValue)

app.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用splice():

app.items.splice(newLength)

对象的 v-for

---

v-for除了可以使用在数组上之外还可以应用在对象上。

<!-- Template -->
<ul>
    <li v-for="value in obj">{{ value }}</li>
</ul>

// JavaScript
obj: {
    firstName: &#39;Airen&#39;,
    lastName: &#39;Liao&#39;,
    age: 30
}

使用v-for可以把obj的每个key对应的value值遍历出来，并且填到对应的li元素中。效果如下：

你也可以给对象的key遍历出来：

<ul>
    <li v-for="(value, key) in obj">{{ key }}: {{ value }}</li>
</ul>

效果如下：

同样，也可以类似数组一样，可以把index索引做为第三个参数：

<ul>
    <li v-for="(value, key, index) in obj">{{ index }}. {{ key }}: {{ value }}</li>
</ul>

前面提到过，数组可以变异，但对于对象而言，Vue不能检测对象属性的添加或删除。这主要也是由于JavaScript的限制。不过在Vue中，对于已经创建好的实例，可以使用Vue.set(object, key, value)方法向嵌套对象添加响应式属性。例如：

var app = new Vue({
    data: {
        obj: {
            name: 'Airen'
        }
    }
})

可以使用类似下面的方式，给obj对象添加一个新的属性age：

Vue.set(app.obj, 'age', 27)

回到我们的示例中给数据源中的obj添加一个'from'的key，而且其对应的value值为'江西'：

除了Vue.set()之外，还可以使用app.$set实例方法，它其实就是Vue.set的别名:

mounted(){
    this.$set(this.obj, '职位', '码农')
}

这里用到了Vue中的mounted()，和computed一样，也不知道他在Vue中的作用，同样放到后面来。我们总是会搞明白的。

有时候你可能需要为已有对象赋予多个新属性，比如使用Object.assign()或_.extend()。在这种情况下，应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(this.obj, {
    age: 27,
    favoriteColor: 'Vue Green'
})

应该这样做：

this.obj = Object.assign({}, this.obj, {
    age: 27,
    favoriteColor: 'Vue Green'
})

一段取值范围的 v-for

---

v-for也可以取整数。在这种情况下，它将重复多次模板：

<ul>
    <li v-for="n in 10">{{ n }}</li>
</ul>

结果如下：

v-for 和 一个 <template>

---

类似于v-if，你也可以利用带有v-for的<template>渲染多个元素，比如：

<ul>
    <template v-for="(value, key) in obj">
        <li>
            <label :for="key">{{ key }}:</label>
            <input type="text" :placeholder="value" :id="key" />
        </li>
    </template>
</ul>

效果如下：

注意了，v-for和<template>一起使用的时候，需要把v-for写在<template>元素上。另外上面的示例中，咱们还使用了Vue的一些其他特性，但这些特性不是这节内容所要学习的。后面我们会有机会一一介绍的。

一个组件的 v-for

---

在自定义组件里，也可以像任何普通元素一样用v-for。

<my-component v-for="item in items" :key="item.id"></my-component>

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

然而他不能自动传递数据到组件里，因为组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 props：

<my-component
    v-for="(item, index) in items"
    v-bind:item="item"
    v-bind:index="index"
    v-bind:key="item.id"
></my-component>

不自动注入 item 到组件里的原因是，因为这使得组件会与 v-for 的运作紧密耦合。在一些情况下，明确数据的来源可以使组件可重用。

来看一个简单的Todo示例：

<div id="todo">
    <input
        v-model="newTodoText"
        v-on:keyup.enter="addNewTodo"
        placeholder="Add a todo"
    />

    <ul>
        <li
            is="todoItem"
            v-for="(todo, index) in todos"
            v-bind:title="todo"
            v-on:remove="todos.splice(index, 1)"></li>
    </ul>
</div>

Vue.component(&#39;todoItem&#39;, {
    template:`
        <li>
            {{ title }}
            <button v-on:click="$emit(&#39;remove&#39;)">x</button>
        </li>
    `,
    props: [&#39;title&#39;]
})

new Vue({
    el: &#39;#todo&#39;,
    data: {
        newTodoText: &#39;&#39;,
        todos: [
            &#39;Do the dishes&#39;,
            &#39;Take out the trash&#39;,
            &#39;Mow the lawn&#39;
        ]
    },
    methods: {
        addNewTodo: function() {
            this.todos.push(this.newTodoText)
            this.newTodoText = &#39;&#39;
        }
    }
})

总结

---

这篇文章主要总结了Vue的v-for指令。通过这个指令，配合数据源中的数组或者对象，我们可以很方便的生成列表。这也常常称为列表渲染。当然配合一些模板，我们可以做出一些特有的功能和效果。比如文章中最后一个Todo 列表，使用v-for很易实现。

（学习视频分享：web前端开发、编程基础视频）

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!