Liste Vue.js rendant le sous-composant d'objet de tableau v-for

Cette fois, je vous présente le sous-composant de rendu de liste Vue.js v-pour tableau objet, en utilisant le rendu de liste Vue.js v-pour le sous-composant d'objet de tableau Choses à noter Quels sont les cas suivants ? Jetons un coup d'œil à des cas réels.

v-for (tableau)

<template>
  <p id="myapp">
    <!--普通-->
    <ul>
      <li v-for="item in list">
        {{item.name}} - {{item.price}}      </li>
    </ul>
    <hr>
    <!--v-text-->
    <ul>
      <li v-for="item in list" v-text="item.name + &#39; - &#39; + item.price"></li>
    </ul>
    <hr>
    <!--带序号 并且给奇数行添加一个class=add-->
    <ul>
      <li v-for="(item,index) in list" :class="{add:index % 2}">
        {{item.name}} - {{item.price}} - {{index}}      </li>
    </ul>
  </p></template><script>
  export default {    data: function () {      return {        list: [
          {            name: &#39;apple&#39;,            price: 34
          },
          {            name: &#39;banana&#39;,            price: 56
          }
        ]
      }
    }
  }</script>

Résultat de l'exécution :

v-for (objet) Obtenir clé - valeur

<template>
  <p id="myapp">
    <!--v-for 对象-->
    <!--只获取value-->
    <ul>
      <li v-for="value in objList">
        {{value}}      </li>
    </ul>
    <!--获取key -value-->
    <ul>
      <li v-for="(value, key) in objList">
        {{key}} - {{value}}      </li>
    </ul>
  </p></template><script>
  export default {    data: function () {      return {        objList: {          name: &#39;apple&#39;,          price: 34,          color: &#39;red&#39;,          weight: 14
        }
      }
    }
  }</script>

Résultat de l'exécution :

v-for (sous-composant)

Créez d'abord un composant a

Le code Code a.vue est le suivant :

<template>
  <p class="hello">
    {{ hello }}  </p></template><script>
  export default {
    data () {      return {        hello: &#39;I am componnet a&#39;
      }
    }
  }</script>

Appel

<template>
  <p id="myapp">
    <componentA v-for="(value, key) in objList"></componentA>
  </p></template><script>
  import componentA from &#39;./components/a.vue&#39;
  export default {//    注册组件
    components: {componentA},    data: function () {      return {        objList: {          name: &#39;apple&#39;,          price: 34,          color: &#39;red&#39;,          weight: 14
        }
      }
    }
  }</script>

dans MyApp.vue Résultat de l'exécution :

<.>Croyez-le Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour un contenu plus passionnant, veuillez prêter attention aux

autres articles liés sur le site Web chinois de php !

Lecture recommandée :

Quelles sont les précautions à prendre pour utiliser Vue.js

Application avancée en profondeur du DOM dans JavaScript

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!