快捷導(dǎo)航

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

更新時間：2020年02月19日 14:26:49 作者：xsan

這篇文章主要介紹了vue 使用v-for進(jìn)行循環(huán)的實例代碼詳解,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下

代碼如下所示：

<!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>序號</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)對象</h3>
  <div v-for="(value,key) in person">
   {{key}}:{{value}}
  </div>
 </div>
 <script>
  new Vue({
   el: '#app',
   data: {
    books: [{
      title: '水滸傳',
      author: '施耐庵',
     },
     {
      title: '三國演義',
      author: '羅貫中',
     },
     {
      title: '西游記',
      author: '吳承恩',
     },
     {
      title: '紅樓夢',
      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)換位置，對象，第二個才是索引，且索引是從0開始的，所以在下面寫序號時，才會是“+1” 第一個永遠(yuǎn)為對象。

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

基于Vue2實現(xiàn)簡易的省市區(qū)縣三級聯(lián)動組件效果
這是一個基于Vue2的簡易省市區(qū)縣三級聯(lián)動組件，可以控制只顯示省級或只顯示省市兩級，可設(shè)置默認(rèn)值等。提供原始省市縣代碼和名稱數(shù)據(jù)，適用于各種有關(guān)城市區(qū)縣的應(yīng)用。需要的朋友可以參考下
2018-11-11
Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)
日常業(yè)務(wù)開發(fā)中，form表單校驗是一個很常見的問題，本文主要介紹了Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
基于axios 的responseType類型的設(shè)置方法
今天小編就為大家分享一篇基于axios 的responseType類型的設(shè)置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
從零寫vue日歷組件
最近做項目遇到一個需求，需要制作一個定制化的日歷組件，本文主要介紹了從零寫vue日歷組件，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue 使用typescript如何優(yōu)雅的調(diào)用swagger API
這篇文章主要介紹了Vue 使用typescript如何優(yōu)雅的調(diào)用swagger API,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-09-09
使用proxytable 配置解決 vue-cli 的跨域請求問題【推薦】
這篇文章主要介紹了利用 proxytable 配置解決 vue-cli 的跨域請求問題,本文的目錄結(jié)構(gòu)基于 webpack 模板結(jié)構(gòu)，需要的朋友可以參考下
2018-05-05
VUE3使用JSON編輯器方式
這篇文章主要介紹了VUE3使用JSON編輯器方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
基于vue cli 通過命令行傳參實現(xiàn)多環(huán)境配置
這篇文章主要介紹了vue項目通過命令行傳參實現(xiàn)多環(huán)境配置(基于@vue/cli)的相關(guān)資料,需要的朋友可以參考下
2018-07-07
vue數(shù)據(jù)操作之點擊事件實現(xiàn)num加減功能示例
這篇文章主要介紹了vue數(shù)據(jù)操作之點擊事件實現(xiàn)num加減功能,結(jié)合實例形式分析了vue.js事件響應(yīng)及數(shù)值運算相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
Vue +WebSocket + WaveSurferJS 實現(xiàn)H5聊天對話交互的實例
這篇文章主要介紹了Vue +WebSocket + WaveSurferJS 實現(xiàn)H5聊天對話交互的實例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下
2020-11-11