列表渲染

用 v-for 把一個數組對應爲一組元素

咱們能夠用 v-for 指令基於一個數組來渲染一個列表。v-for 指令須要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。

<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' }
    ]
  }
})

 

 

在 v-for 塊中，咱們能夠訪問全部父做用域的屬性。v-for 還支持一個可選的第二個參數，即當前項的索引。

<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' }
    ]
  }
})

 

你也能夠用 of 替代 in 做爲分隔符，由於它更接近 JavaScript 迭代器的語法：

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

 

在 v-for 裏使用對象

你也能夠用 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'
    }
  }
})

你也能夠提供第二個的參數爲 property 名稱 (也就是鍵名)：

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

 

還能夠用第三個參數做爲索引：

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

 

在遍歷對象時，會按 Object.keys() 的結果遍歷，可是不能保證它的結果在不一樣的 JavaScript 引擎下都一致。

 

在 v-for 裏使用值範圍

v-for 也能夠接受整數。在這種狀況下，它會把模板重複對應次數。

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

 

結果: 1 2 3 4 5 6 7 8 9 10

在 <template> 上使用 v-for

相似於 v-if，你也能夠利用帶有 v-for 的 <template> 來循環渲染一段包含多個元素的內容。好比：

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

v-for 與 v-if 一同使用

當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。當你只想爲部分項渲染節點時，這種優先級的機制會十分有用，以下：

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

 

上面的代碼將只渲染未完成的 todo。

而若是你的目的是有條件地跳過循環的執行，那麼能夠將 v-if 置於外層元素 (或 <template>)上。如：

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

　　　　此處的v-for和v-if的配合使用,有點相似於篩選,用v-if來篩選出不須要渲染的部分

 

在組件上使用 v-for

在自定義組件上，你能夠像在任何普通元素上同樣使用 v-for 。

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

 

2.2.0+ 的版本里，當在組件上使用 v-for 時，key 如今是必須的。

然而，任何數據都不會被自動傳遞到組件裏，由於組件有本身獨立的做用域。爲了把迭代數據傳遞到組件裏，咱們要使用 prop：

<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 的運做緊密耦合。明確組件數據的來源可以使組件在其餘場合重複使用。