Vue.js
सूची प्रस्तुत करना

मूल उपयोग

एक सूची v-for डायरेक्टिव का उपयोग करके प्रदान की जा सकती है। सिंटैक्स के लिए आवश्यक है कि आप स्रोत सरणी को पुनरावृति करने के लिए निर्दिष्ट करें, और एक ऐसा उपनाम जिसका उपयोग पुनरावृत्ति में प्रत्येक आइटम को संदर्भित करने के लिए किया जाएगा। निम्न उदाहरण में उपयोग हम items स्रोत सरणी, और के रूप में item प्रत्येक आइटम के लिए उपनाम के रूप में।

एचटीएमएल

<div id="app">
  <h1>My List</h1>
  <table>
    <tr v-for="item in items">
      <td>{{item}}</td>
    </tr>
  </table>
</div>

लिपि

new Vue({
  el: '#app',
  data: {
    items: ['item 1', 'item 2', 'item 3']
  }
})

आप यहां एक कार्यशील डेमो देख सकते हैं ।

केवल HTML आइटम रेंडर करें

इस उदाहरण में पाँच <li> टैग प्रस्तुत किया जाएगा

<ul id="render-sample">
  <li v-for="n in 5">
    Hello Loop
  </li>
</ul>

सुअर उलटी गिनती सूची

<ul>
  <li v-for="n in 10">{{11 - n}} pigs are tanning at the beach. One got fried, and
</ul>

https://jsfiddle.net/gurghet/3jeyka22/

किसी वस्तु पर होनेवाला फेरबदल

v-for एक वस्तु कुंजी (और मूल्यों) पर पुनरावृत्ति के लिए इस्तेमाल किया जा सकता है:

HTML:

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

स्क्रिप्ट:

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})