Introduction détaillée au rendu de liste dans vuejs

Cet article vous apporte une introduction détaillée au rendu de liste dans vuejs. 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 vous sera utile.

Utilisez v-for pour faire correspondre un tableau à un ensemble d'éléments

Nous utilisons la commande v-for pour effectuer un rendu en fonction de la liste d'options d'un ensemble de tableaux . La directive v-for nécessite une syntaxe spéciale de l'élément de formulaire dans items, où items est le tableau de données source et item est un alias pour itérer sur les éléments du tableau.

<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: &#39;#example-1&#39;,
data: {
items: [
{ message: &#39;Foo&#39; },
{ message: &#39;Bar&#39; }
]
}
})

Dans le bloc v-for, nous avons un accès complet aux propriétés de la portée parent. v-for prend également en charge un deuxième paramètre facultatif qui est l'index de l'élément actuel.

<ul id="example-2">
<li v-for="(item, index) 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; }
]
}
})

Vous pouvez également utiliser of au lieu de in comme séparateur, car c'est la syntaxe la plus proche des itérateurs javascript

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

v-for d'un objet

Vous pouvez également utiliser v-for pour parcourir les propriétés d'un objet.

<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: &#39;#v-for-object&#39;,
data: {
object: {
firstName: &#39;John&#39;,
lastName: &#39;Doe&#39;,
age: 30
}
}
})

Vous pouvez également fournir le deuxième paramètre comme nom de clé

<p v-for="(value, key) in object">
{{ key }}: {{ value }}
</p>

Le troisième paramètre est l'index :

<p v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</p>

Quand en traversant des objets, il est parcouru en fonction du résultat de Object.key(), mais il n'y a aucune garantie que ses résultats seront cohérents sous différents moteurs JavaScript

key

est utilisé lorsque vue. .js Lorsque v-for met à jour la liste des éléments rendus, la stratégie par défaut est "réutilisation sur place". Si l’ordre des éléments de données est modifié. Vue ne déplacera pas les éléments DOM pour correspondre à l'ordre des éléments de données, mais y réutilisera simplement chaque élément et s'assurera qu'il affiche chaque élément rendu à un index spécifique. Ceci est similaire à track-by="$index" de vue1.x.

Ce mode par défaut est efficace, mais convient uniquement à la sortie de rendu de liste qui ne repose pas sur l'état du sous-composant ou sur l'état temporaire du DOM (par exemple : valeurs d'entrée du formulaire).

Afin de donner à Vue un indice afin qu'il puisse garder une trace de l'identité de chaque nœud et ainsi réutiliser et réorganiser les éléments existants, vous devez fournir un attribut clé unique pour chaque élément. La valeur de clé idéale est un identifiant unique pour chaque élément. Cet attribut spécial est équivalent au track-by de vue1.x, mais il fonctionne comme une propriété, vous devez donc utiliser v-bind pour lier dynamiquement la valeur.

<p v-for="item in items" :key="item.id">
<!-- 内容 -->
</p>

Il est recommandé de fournir autant que possible la clé lors de l'utilisation de v-for, à moins que la traversée du contenu dom de sortie ne soit très simple, ou vous pouvez compter sur le comportement par défaut pour obtenir des améliorations de performances.

Comme il s'agit d'un mécanisme général permettant à Vue d'identifier les nœuds, la clé n'est pas spécifiquement liée à v-for. La clé a également d'autres utilisations,

Détection de mise à jour du tableau

<. 🎜 >Méthodes compilées

vue contient des méthodes compilées qui observent toujours le tableau, elles déclencheront donc également des mises à jour de la vue.

* push()————Dans un tableau

* pop()——— — Hors du tableau

* shift()————

* unshift()

* splice()——Split array

* sort( ) ———— Trier le tableau

* reverse() ———— Retourner le tableau

Remplacez les méthodes de mutation array

, ce qui modifiera le tableau d'origine appelé par ces méthodes. En revanche, il existe également des méthodes non mutationnelles. Par exemple : filter(), concat() et slice().

Ceux-ci ne modifient pas le tableau d'origine, mais renvoient toujours un nouveau tableau. Lorsque vous utilisez la méthode de non-mutation, vous pouvez remplacer l'ancien tableau

example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})

par un nouveau tableau. Vous pensez peut-être que. cela entraînera la suppression du tableau actuel par Vue et le rendu de la liste entière. Heureusement, ce n'est pas le cas. Vue a implémenté des méthodes intelligentes et heuristiques afin de maximiser la réutilisation des éléments du DOM, donc remplacer le tableau d'origine par un tableau contenant les mêmes éléments est une opération très efficace.

Notes

En raison des limitations de JavaScript, vue ne peut pas détecter les tableaux modifiés suivants

1 Lorsque vous utilisez un index pour définir directement un élément, par exemple : vm.items. [ indexOfItem] = newValue

2. Lorsque vous modifiez la longueur du tableau, par exemple : vm.items.length = newLength

var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

Afin de résoudre le premier type de problème, les deux méthodes suivantes peuvent obtenir le même effet que vm.items[indexOfItem] = newValue, et déclencheront également des mises à jour de statut

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用vm.$set实例方法，该方法是全局方法vue.set的一个别名

vm.$set(vm.items, indexOfItem, newValue)

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

vm.items.splice(newLength)

splice()方法向/从数组添加/删除项目，然后返回被删除的项目

arrayObject.splice(index,howmany,item1,.....,itemX)

index

必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany

必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, ..., itemX

可选。向数组添加的新项目。

对象更改检测注意事项

还是由于javascript的限制，vue不能检测对象属性的添加或删除

var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
 
vm.b = 2
// `vm.b` 不是响应式

对于已经创建的实例，vue不能动态添加跟级别的响应式属性。但是，可以使用 Vue.set(object, key, value)方法向嵌套对象添加响应式属性。

var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})

你可以添加一个age属性到嵌套的userProfile对象：

Vue.set(vm.userProfile, 'age', 27)

你还可以使用vm.$set实例方法，他只是全局vue.set的别名

vm.$set(vm.userProfile, 'age', 27)

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

Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你应该这样：
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

显示过滤/排序结果

有事，我们想要显示一个数组的过滤或排序副本，而不实际改变 或重置原始数据。在这种情况下，可以创建返回过滤或排序 数组的计算属性。

<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在计算属性不使用的情况下，（例如，在嵌套v-for循环中）你可以使用method方法。

data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}

一段取值范围的v-for

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

<p>
<span v-for="n in 10">{{ n }} </span>
</p>

v-for on a