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 d477f9ce7bf77f53fbcf36bec1b69b7a

类似于v-if,你也可以利用带有v-for的d477f9ce7bf77f53fbcf36bec1b69b7a渲染多个元素。

<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="pider" role="presentation"></li>
</template>
</ul>

v-for with v-if

当他们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行与每个v-for循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用。

<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>

上面的代码只传递了未完成的 todos。

而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 d477f9ce7bf77f53fbcf36bec1b69b7a)上。如：

<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>

一个组件的v-for

了解组件相关知识，查看组件。完全可以先跳过他，以后再回来 查看。

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

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

当在组件中使用 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的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

<p id="todo-list-example">
<form v-on:submit.prevent="addNewTodo">
<label for="new-todo">Add a todo</label>
<input
v-model="newTodoText"
id="new-todo"
placeholder="E.g. Feed the cat"
>
<button>Add</button>
</form>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</p>

注意这里的is="todo-item"属性。这种做法在使用dom模板时是十分必要的。因为在ff6d136ddc5fdfeffaf53ff6ee95f185元素内只有25edfb22a4f469ecb59f1190150159c6元素 会被看做有效内容。这样做实现的效果与c20b531f5b99ef8837ce29ced08ba7cd相同。但是可以避开一些潜在的浏览器解析错误。

<p id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    >
    <button>Add</button>
  </form>
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</p>

注意这里的 is="todo-item" 属性。这种做法在使用 DOM 模板时是十分必要的，因为在 ff6d136ddc5fdfeffaf53ff6ee95f185 元素内只有 25edfb22a4f469ecb59f1190150159c6 元素会被看作有效内容。这样做实现的效果与 c20b531f5b99ef8837ce29ced08ba7cd 相同，但是可以避开一些潜在的浏览器解析错误。查看 DOM 模板解析说明 来了解更多信息。

Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\&#39;remove\&#39;)">Remove</button>\
    </li>\
  &#39;,
  props: [&#39;title&#39;]
})
 
new Vue({
  el: &#39;#todo-list-example&#39;,
  data: {
    newTodoText: &#39;&#39;,
    todos: [
      {
        id: 1,
        title: &#39;Do the dishes&#39;,
      },
      {
        id: 2,
        title: &#39;Take out the trash&#39;,
      },
      {
        id: 3,
        title: &#39;Mow the lawn&#39;
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = &#39;&#39;
    }
  }
})

相关推荐：

js实现页面间数据传递的代码

reac如何t实现更换皮肤颜色的功能

 jQuery中的方法有哪些?jQuery中常用的方法（附代码）

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!