Rendu de liste

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

Considérations sur la détection des changements d'objet

---

🎜Ou en raison des limitations de JavaScript, Vue ne peut pas détecter l'ajout ou la suppression de propriétés d'objet : 🎜

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

🎜Pour les instances déjà créées, Vue ne le fait pas permettre l'ajout dynamique de propriétés réactives au niveau racine. Cependant, vous pouvez ajouter des propriétés réactives aux objets imbriqués à l'aide de la méthode Vue.set(object, propertyName, value). Par exemple, pour : 🎜

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

🎜 Vous pouvez ajouter une nouvelle propriété age à l'objet userProfile imbriqué : 🎜

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

🎜Vous pouvez également utiliser vm.$set < /code> Méthode d'instance, il s'agit simplement d'un alias du Vue.set global : 🎜

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

🎜Parfois, vous devrez peut-être attribuer plusieurs nouvelles propriétés à un objet existant, par exemple en utilisant Object. assign() ou _.extend(). Dans ce cas, vous devez créer un nouvel objet avec les propriétés des deux objets. Donc, si vous souhaitez ajouter un nouvel attribut responsive, au lieu de ceci : 🎜rrreee🎜 vous devriez faire ceci : 🎜rrreee🎜🎜🎜

Afficher les résultats filtrés/triés

---

Parfois, nous souhaitons afficher une version filtrée ou triée d'un tableau sans réellement modifier ou réinitialiser les données d'origine. Dans ce cas, vous pouvez créer une propriété calculée qui renvoie un tableau filtré ou trié.

Par exemple :

rrreeerrreee

Dans les cas où les propriétés calculées ne sont pas applicables (par exemple, dans des boucles v-for imbriquées), vous pouvez utiliser une méthode : v-for 循环中) 你可以使用一个方法：

rrreeerrreee

在 v-for 里使用值范围

---

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

rrreee

结果：

在 <template> 上使用 v-for

---

类似于 v-if，你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。比如：

rrreee

v-for 与 v-if 一同使用

---

注意我们不推荐在同一元素上使用 v-if 和 v-for。更多细节可查阅 风格指南。

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

rrreee

上面的代码将只渲染未完成的 todo。

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

rrreee

在组件上使用 v-for

---

这部分内容假定你已经了解组件相关知识。你也完全可以先跳过它，以后再回来查看。

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

rrreee

2.2.0+ 的版本里，当在组件上使用 v-for 时，keyrrreeerrreee

🎜🎜Utiliser des plages de valeurs dans v-for 🎜🎜🎜🎜🎜v-for peut également accepter des nombres entiers. Dans ce cas, il répétera le modèle le nombre de fois correspondant. 🎜rrreee🎜Résultats : 🎜🎜🎜🎜
🎜

🎜🎜Utilisez v-for sur <template> 🎜🎜🎜🎜🎜Similaire à < code>v-if, vous pouvez également utiliser <template> avec v-for pour restituer un contenu contenant plusieurs éléments dans une boucle. Par exemple : 🎜rrreee🎜
🎜

🎜🎜v-for est utilisé avec v-if🎜🎜🎜🎜

🎜Notez que nous 🎜 ne le faisons pas 🎜 Je recommande d'utiliser le même élément. Utilisez v-if et v-for. Plus de détails peuvent être trouvésstyle Guide. 🎜

🎜Lorsqu'ils sont sur le même nœud, v-for a une priorité plus élevée que v-if, ce qui signifie v-if code> sera exécuté individuellement et à plusieurs reprises dans chaque boucle v-for. Ce mécanisme de priorité est utile lorsque vous souhaitez uniquement afficher les nœuds pour certains éléments, comme suit : 🎜rrreee🎜Le code ci-dessus ne rendra que les tâches inachevées. 🎜🎜Et si votre objectif est d'ignorer conditionnellement l'exécution de la boucle, alors vous pouvez placer v-if dans l'élément externe (ou <template>). Tels que : 🎜rrreee🎜
🎜

🎜🎜Utilisez v-for sur le composant🎜🎜🎜🎜

🎜🎜Cette partie suppose que vous avez déjà comprendre 🎜🎜Components🎜🎜Connaissances connexes. Vous pouvez également l'ignorer et y revenir plus tard. 🎜🎜

🎜Sur les composants personnalisés, vous pouvez utiliser v-for comme vous le feriez sur n'importe quel élément normal. 🎜rrreee

🎜🎜Dans la version 2.2.0+, lors de l'utilisation de v-for sur un composant, key est désormais requis. 🎜🎜

Cependant, aucune donnée ne sera automatiquement transmise au composant car le composant a sa propre portée indépendante. Afin de transmettre les données d'itération au composant, nous devons utiliser prop :

rrreee

La raison pour laquelle item n'est pas automatiquement injecté dans le composant est que cela rendra le composant différent de Les opérations de v-for sont étroitement couplées. Clarifier la source des données d'un composant permet de réutiliser le composant dans d'autres situations. item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

下面是一个简单的 todo 列表的完整例子：

rrreee

注意这里的 is="todo-item" 属性。这种做法在使用 DOM 模板时是十分必要的，因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与 <todo-item>Voici un exemple complet d'une simple liste de tâches : rrreee

Notez l'attribut is="todo-item" ici. Cette approche est très nécessaire lors de l'utilisation de modèles DOM, car seul l'élément <li> au sein de l'élément <ul> sera considéré comme un contenu valide. Cela produit le même effet que <todo-item>, mais peut éviter certaines erreurs potentielles d'analyse du navigateur. Consultez les

Instructions d'analyse du modèle DOM

pour en savoir plus.

rrreee

🎜🎜 🎜