怎么在vue中使用v-for實(shí)現(xiàn)循環(huán)-創(chuàng)新互聯(lián)

本篇文章為大家展示了怎么在vue中使用v-for實(shí)現(xiàn)循環(huán)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)阿克蘇免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

代碼如下所示：

<!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">
  <h4>循環(huán)列表</h4>
  <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">
  <h4>循環(huán)對(duì)象</h4>
  <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，這樣雖然用了，但是沒有效果。在vue2.2.x以上，在自定義組件上使用v-for，key是必須要寫的。

上述內(nèi)容就是怎么在vue中使用v-for實(shí)現(xiàn)循環(huán)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱：怎么在vue中使用v-for實(shí)現(xiàn)循環(huán)-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://bm7419.com/article10/dgocdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站建設(shè)、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容