Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見(jiàn)方式小結(jié)
本文實(shí)例講述了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見(jiàn)方式。分享給大家供大家參考，具體如下：
定義數(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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun冊(cè)數(shù)，輸出結(jié)果：
v-for對(duì)數(shù)組的幾種輸出方式：
1.只輸出value值
html代碼：
<div id="test">
<div v-for = "item in list">{{ item }}</div>
</div>
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun冊(cè)數(shù)，輸出結(jié)果：
2.輸出value值且輸出對(duì)應(yīng)的索引值
html代碼：
<div id="test">
<div v-for = "(item,index) in list">{{ item }}的索引值是{{ index }}</div>
</div>
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun冊(cè)數(shù)，輸出結(jié)果：
v-for對(duì)json格式的幾種輸出方式
1.只輸出value值
html代碼：
<div id="test">
<div v-for = "item in web">{{ item }}</div>
</div>
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun冊(cè)數(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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun冊(cè)數(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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun冊(cè)數(shù)，輸出結(jié)果：
可以看出，在數(shù)組里面，小括號(hào)里面的參數(shù)第一位是value值，第二位是索引值
在json里面，第一位是value值，第二位是key值，第三位是索引值
有的文章里面說(shuō)$index是數(shù)組的內(nèi)置變量數(shù)組下標(biāo)，$key是json內(nèi)置變量，可是我沒(méi)有測(cè)出來(lái)，且提示有錯(cuò)，不知道這個(gè)到底對(duì)不對(duì)。
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue使用Sass時(shí)報(bào)錯(cuò)問(wèn)題的解決方法
這篇文章主要介紹了vue使用Sass時(shí)報(bào)錯(cuò)問(wèn)題的解決方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
Vue3中v-model語(yǔ)法糖的三種寫(xiě)法詳解
這篇文章主要為大家詳細(xì)介紹了Vue3中v-model語(yǔ)法糖的三種寫(xiě)法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Vue保持用戶登錄狀態(tài)(各種token存儲(chǔ)方式)
本文主要介紹了Vue保持用戶登錄狀態(tài)(各種token存儲(chǔ)方式)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue在mounted中window.onresize不生效問(wèn)題及解決
這篇文章主要介紹了vue中在mounted中window.onresize不生效問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue組件跨層級(jí)獲取組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
關(guān)于vue data中的this指向問(wèn)題
這篇文章主要介紹了關(guān)于vue data中的this指向問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue組件實(shí)現(xiàn)可搜索下拉框擴(kuò)展
這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)可搜索下拉框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易記事本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出)
這篇文章主要介紹了vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)分頁(yè)查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11