标签：index Vue items 列表 item 循环 message

v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

v-for的关键词in可以用of来替代

v-for循环数组

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在循环数组的情况下for还可以支持俩个参数，除了item外还有index索引，另外for循环的时候该元素可以正常访问vue其它属性

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

v-for循环对象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

v-for循环对象最多可以传入三个参数分别是value、name、index（其中name和index为可选项）

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

维护状态（不太理解）

大概理解的意思是Vue更新使用v-for渲染的列表的时候，并不会通过移动Dom元素的方式进行，而是通过更新的每一个元素的方式进行…具体的看文档吧，总之教程表达的意思就是用v-for的时候尽量带上key属性（key的值需要时js基本类型）。如下：

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

标签：index,Vue,items,列表,item,循环,message
来源： https://blog.csdn.net/NaXieNianWoMenYiQ/article/details/104825737

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。