首頁 > web前端 > js教程 > 主體

Vue.js中v-for列表渲染指令的使用(程式碼範例)

藏色散人
發布: 2019-03-30 09:58:09
原創
3131 人瀏覽過

本篇文章將為大家介紹如何循環數組並在vuejs渲染項目列表,希望對需要的朋友有所幫助!

Vue.js中v-for列表渲染指令的使用(程式碼範例)

v-for#指令

Vuejs為我們提供了一個v-for指令,用於將項目清單渲染到dom

v-for指令的語法

v-for="user in users"

登入後複製

範例



登入後複製

在上面的程式碼中,我們使用v-for指令循環遍歷users數組,這樣在每次循環中user變數都指向數組中出現的不同物件。

Vue.js中v-for列表渲染指令的使用(程式碼範例)

key#屬性

當使用v-for指令時,我們需要在該元素上新增一個key屬性,因為vuejs需要根據提供的key追蹤清單項目。

注意:金鑰應該是唯一的

讓我們將key屬性加入到範本中。



登入後複製

users陣列中,id屬性對每個物件都是唯一的,因此我們將它傳遞給key屬性。

我們也可以存取陣列中每個項目的索引。

登入後複製

遍歷物件

我們也可以透過使用v-for指令循環JavaScript物件物件。



登入後複製

Vue.js中v-for列表渲染指令的使用(程式碼範例)

注意:在物件中,我們需要先提取value,然後是key

這篇文章就是關於Vue.js中v-for列表渲染指令的使用介紹,希望對需要的朋友有幫助!

以上是Vue.js中v-for列表渲染指令的使用(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!