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，這樣雖然用了，但是沒有效果。在vue2.2.x以上，在自定義組件上使用v-for，key是必須要寫的。

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

webpack搭建vue環(huán)境時(shí)報(bào)錯(cuò)異常解決
這篇文章主要介紹了webpack搭建vue環(huán)境時(shí)報(bào)錯(cuò)異常解決,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
基于elementUI實(shí)現(xiàn)圖片預(yù)覽組件的示例代碼
這篇文章主要介紹了基于elementUI實(shí)現(xiàn)圖片預(yù)覽組件的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)
本文主要介紹了Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
electron-vite工具打包后如何通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址
使用electron-vite?工具開發(fā)項(xiàng)目打包完后每次要改接口地址都要重新打包,對(duì)于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址實(shí)現(xiàn)方法,需要的朋友可以參考下
2024-05-05
vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法示例【基于vm.$watch】
這篇文章主要介紹了vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法,結(jié)合實(shí)例形式分析了vue.js基于vm.$watch進(jìn)行事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的差別(詳解)
下面小編就為大家分享一篇基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的差別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
vue打包后dist目錄下的index.html網(wǎng)頁(yè)顯示空白的問(wèn)題(兩種方案)
本文主要介紹了vue打包后dist目錄下的index.html網(wǎng)頁(yè)顯示空白的問(wèn)題,主要介紹了兩種方式,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-11-11
vue3.0 CLI - 2.5 - 了解組件的三維
通過(guò)本文帶領(lǐng)大家去學(xué)習(xí)vue3.0 CLI - 2.5 - 了解組件的三維的相關(guān)知識(shí)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2018-09-09
vue3+pinia用戶信息持久緩存token的問(wèn)題解決
本文主要介紹了vue3+pinia用戶信息持久緩存token的問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
uniapp?webview和H5通信的3種方式代碼示例
最近在研究uni-app跨端開發(fā)APP和H5的通訊和交互,比如H5調(diào)用APP的方法,APP往H5里面?zhèn)鲄?H5往app外面?zhèn)鲄?這篇文章主要給大家介紹了關(guān)于uniapp?webview和H5通信的3種方式,需要的朋友可以參考下
2024-04-04