Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)
本文實例講述了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式。分享給大家供大家參考，具體如下：
定義數(shù)據(jù)：
<script>
new Vue({
el:"#test",
data:{
message:"infor",
list:["a","b","c","d","e"],
web:{
"百度":"https://www.baidu.com",
"搜狐":"https://www.sohu.com",
"新浪":"https://www.sina.com",
"淘寶":"https://www.taobao.com"
}
}
})
</script>
html結(jié)構(gòu)：
<div id="test">
<div>{{ message }}</div>
<div>{{ list }}</div>
<div>{{ web }}</div>
</div>
完整示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for遍歷</title>
</head>
<body>
<div id="test">
<div>{{ message }}</div>
<div>{{ list }}</div>
<div>{{ web }}</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
new Vue({
el:"#test",
data:{
message:"infor",
list:["a","b","c","d","e"],
web:{
"百度":"https://www.baidu.com",
"搜狐":"https://www.sohu.com",
"新浪":"https://www.sina.com",
"淘寶":"https://www.taobao.com"
}
}
})
</script>
</body>
</html>
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun冊數(shù)，輸出結(jié)果：
v-for對數(shù)組的幾種輸出方式：
1.只輸出value值
html代碼：
<div id="test">
<div v-for = "item in list">{{ item }}</div>
</div>
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun冊數(shù)，輸出結(jié)果：
2.輸出value值且輸出對應(yīng)的索引值
html代碼：
<div id="test">
<div v-for = "(item,index) in list">{{ item }}的索引值是{{ index }}</div>
</div>
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun冊數(shù)，輸出結(jié)果：
v-for對json格式的幾種輸出方式
1.只輸出value值
html代碼：
<div id="test">
<div v-for = "item in web">{{ item }}</div>
</div>
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun冊數(shù)，輸出結(jié)果：
2.輸出value值和key值
html代碼：
<div id="test">
<div v-for = "(item,key) in web">{{ key }} 的網(wǎng)址是 ： {{ item }}</div>
</div>
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun冊數(shù)，輸出結(jié)果：
3.輸出value值，key值和索引值index
html代碼：
<div id="test">
<div v-for = "(item,key,index) in web">{{ index }}__{{ key }} 的網(wǎng)址是 ： {{ item }}</div>
</div>
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun冊數(shù)，輸出結(jié)果：
可以看出，在數(shù)組里面，小括號里面的參數(shù)第一位是value值，第二位是索引值
在json里面，第一位是value值，第二位是key值，第三位是索引值
有的文章里面說$index是數(shù)組的內(nèi)置變量數(shù)組下標(biāo)，$key是json內(nèi)置變量，可是我沒有測出來，且提示有錯，不知道這個到底對不對。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例
本篇主要介紹了Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Vue實現(xiàn)側(cè)邊菜單欄手風(fēng)琴效果實例代碼
本文通過一段簡單的代碼給大家介紹了基于純vue實現(xiàn)側(cè)邊菜單欄手風(fēng)琴效果，代碼很簡單，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
vue3.x使用swiperUI動態(tài)加載圖片失敗的解決方法
這篇文章主要為大家詳細介紹了vue3.x使用swiperUI動態(tài)加載圖片失敗的解決方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
計算屬性用于處理復(fù)雜的業(yè)務(wù)邏輯,vue提供了檢測數(shù)據(jù)變化的一個屬性watch可以通過newVal獲取變化之后的值,這篇文章主要給大家介紹了關(guān)于Vue中計算屬性和屬性偵聽的相關(guān)資料,需要的朋友可以參考下2021-10-10
詳解關(guān)于Vuex的action傳入多個參數(shù)的問題
這篇文章主要介紹了詳解關(guān)于Vuex的action傳入多個參數(shù)的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
詳解Vue用axios發(fā)送post請求自動set cookie
本篇文章主要介紹了Vue用axios發(fā)送post請求自動set cookie，非常具有實用價值，需要的朋友可以參考下2017-05-05
在Vue3中為路由Query參數(shù)標(biāo)注類型的方法
這篇文章主要介紹了在Vue3中如何為路由Query參數(shù)標(biāo)注類型,我們就針對這個話題如何為路由Query參數(shù)標(biāo)注類型為例,看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同,需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細介紹了Vue.js路由組件vue-router使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
VUE學(xué)習(xí)寶典之vue-dialog使用方法
在Vue中dialog對話框是一種常見的組件,用于在用戶與應(yīng)用程序進行交互時顯示信息或收集輸入,這篇文章主要給大家介紹了關(guān)于VUE學(xué)習(xí)寶典之vue-dialog使用方法的相關(guān)資料,需要的朋友可以參考下2024-05-05
Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié))
這篇文章主要介紹了Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09