亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue 使用v-for進(jìn)行循環(huán)的實(shí)例代碼詳解

 更新時(shí)間：2020年02月19日 14:26:49   作者：xsan  
這篇文章主要介紹了vue 使用v-for進(jìn)行循環(huán)的實(shí)例代碼詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <title>vue中使用v-for</title>
</head>
<body>
 <div id="app">
  <h3>循環(huán)列表</h3>
  <table>
   <thead>
    <tr>
     <th>序號(hào)</th>
     <th>書名</th>
     <th>作者</th>
    </tr>
   </thead>
   <tbody>
    <tr v-for="(book,index) in books" :key="book.title">
     <td>{{index+1}}</td>
     <td>{{book.title}}</td>
     <td>{{book.author}}</td>
    </tr>
   </tbody>
  </table>
</div>
 <div id="app2">
  <h3>循環(huán)對(duì)象</h3>
  <div v-for="(value,key) in person">
   {{key}}:{{value}}
  </div>
 </div>
 <script>
  new Vue({
   el: '#app',
   data: {
    books: [{
      title: '水滸傳',
      author: '施耐庵',
     },
     {
      title: '三國(guó)演義',
      author: '羅貫中',
     },
     {
      title: '西游記',
      author: '吳承恩',
     },
     {
      title: '紅樓夢(mèng)',
      author: '曹雪芹',
     },
    ]
   }
  })
 </script>
 <script>
  new Vue({
   el: '#app2',
   data: {
    person: {
     name: 'Xsan',
     age: 26,
    }
   }
  })
 </script>
</body>
</html>

　"(book,index) in books"是循環(huán)表達(dá)式，式中的“(book,index)”不可調(diào)換位置，對(duì)象，第二個(gè)才是索引，且索引是從0開始的，所以在下面寫序號(hào)時(shí)，才會(huì)是“+1” 第一個(gè)永遠(yuǎn)為對(duì)象。

　　　循環(huán)狀態(tài)保持。默認(rèn)情況下，如果數(shù)組中的順序發(fā)生變化，或者個(gè)數(shù)發(fā)生變化導(dǎo)致重新渲染，那么vue會(huì)重新利用之前的元素，而不會(huì)重新排序，這樣在某些情況下可能是想要的，但是絕大部分情況可能不是我們想要的，這時(shí)候可以添加key屬性?？梢灾荒軌蚴莕umber和str類型，那么在循環(huán)時(shí)一般使用循環(huán)出來(lái)的對(duì)象的某個(gè)唯一值，不要使用index來(lái)做key，這樣雖然用了，但是沒(méi)有效果。在vue2.2.x以上，在自定義組件上使用v-for，key是必須要寫的。

總結(jié)

以上所述是小編給大家介紹的vue 使用v-for進(jìn)行循環(huán)的實(shí)例代碼詳解，希望對(duì)大家有所幫助，也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論