Vue.js常用指令之循環(huán)使用v-for指令教程
前言
Vue.js中，v-for 指令需要以 item in items 形式的特殊語(yǔ)法， items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。
v-for 可以綁定數(shù)據(jù)到數(shù)組來(lái)渲染一個(gè)列表：
<div id="wantuizhijia">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#wantuizhijia',
data: {
sites: [
{ name: '網(wǎng)推之家' },
{ name: '谷歌' },
{ name: '淘寶' }
]
}
})
</script>
輸出：
模板中使用 v-for：
<div id="wantuizhijia">
<ul>
<template v-for="place in places">
<li>{{ place.name }}</li>
<li>--------------</li>
</template>
</ul>
</div>
<script>
new Vue({
el: '#wantuizhijia',
data: {
places: [
{ name: '廈門(mén)' },
{ name: '漳州' },
{ name: '福州' }
]
}
})
</script>
效果：
v-for 可以通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代數(shù)據(jù)：
<div id="wangtuizhijia">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#wangtuizhijia',
data: {
object: {
name: '腳本之家',
url: 'http://www.fzitv.net',
slogan: '美好生活，等待你的開(kāi)創(chuàng)！'
}
}
})
</script>
效果：
腳本之家
http://www.fzitv.net
美好生活，等待你的開(kāi)創(chuàng)！
v-for 通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代數(shù)據(jù)，可以提供第二個(gè)的參數(shù)為鍵名：
<div id="wangtuizhijia">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#wangtuizhijia',
data: {
object: {
name: '腳本之家',
url: 'http://www.fzitv.net',
slogan: '美好生活，等待你的開(kāi)創(chuàng)！'
}
}
})
</script>
效果：
name : 腳本之家
url : http://www.fzitv.net
slogan : 美好生活，等待你的開(kāi)創(chuàng)！
v-for 通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代數(shù)據(jù)，以第三個(gè)參數(shù)為索引：
<div id="wangtuizhijia">
<ul>
<li v-for="(value, key, index) in object">
{{ index }} {{ key }}:{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#wangtuizhijia',
data: {
object: {
name: '腳本之家',
url: 'http://www.fzitv.net',
slogan: '美好生活，等待你的開(kāi)創(chuàng)！'
}
}
})
</script>
效果：
0 name:腳本之家
1 url:http://www.fzitv.net
2 slogan:美好生活，等待你的開(kāi)創(chuàng)！
v-for 也可以循環(huán)整數(shù)
<div id=”wangtuizhijia”>
<ul>
<li v-for=”n in 10″>
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: ‘#wangtuizhijia'
})
</script>
</body>
效果：
1 2 3 4 5 6 7 8 9 10
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue使用map代替Aarry數(shù)組循環(huán)遍歷的方法
這篇文章主要介紹了vue使用map代替Aarry數(shù)組循環(huán)遍歷的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
在開(kāi)發(fā)后臺(tái)管理系統(tǒng)的時(shí)候,很多地方都要用到導(dǎo)出excel 表格,比如將table中的數(shù)據(jù)導(dǎo)出到本地,這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)出Excel功能的相關(guān)資料,需要的朋友可以參考下2021-07-07
Pinia入門(mén)學(xué)習(xí)之實(shí)現(xiàn)簡(jiǎn)單的用戶狀態(tài)管理
Vue3雖然相對(duì)于Vue2很多東西都變了,但是核心的東西還是沒(méi)有變,比如說(shuō)狀態(tài)管理、路由等,再Vue3中尤大神推薦我們使用pinia來(lái)實(shí)現(xiàn)狀態(tài)管理,他也說(shuō)pinia就是Vuex的新版本,這篇文章主要給大家介紹了關(guān)于Pinia入門(mén)學(xué)習(xí)之實(shí)現(xiàn)簡(jiǎn)單的用戶狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2022-11-11
一起來(lái)學(xué)習(xí)Vue的組件間通信方式
這篇文章主要為大家詳細(xì)介紹了Vue的組件間通信方式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
vue3如何利用自定義指令實(shí)現(xiàn)下拉框分頁(yè)懶加載
下拉框一開(kāi)始請(qǐng)求第一頁(yè)的內(nèi)容,滾動(dòng)到最后的時(shí)候,請(qǐng)求第二頁(yè)的內(nèi)容,如此反復(fù),直到所有數(shù)據(jù)加載完成,這篇文章主要介紹了vue3如何利用自定義指令實(shí)現(xiàn)下拉框分頁(yè)懶加載,需要的朋友可以參考下2024-07-07
vue進(jìn)入頁(yè)面時(shí)不在頂部,檢測(cè)滾動(dòng)返回頂部按鈕問(wèn)題及解決方法
這篇文章主要介紹了vue進(jìn)入頁(yè)面時(shí)不在頂部，檢測(cè)滾動(dòng)返回頂部按鈕問(wèn)題及解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要為大家詳細(xì)介紹了Vue中使用vux配置的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue調(diào)用攝像頭進(jìn)行拍照并能保存到本地的方法
本文主要介紹了vue調(diào)用攝像頭進(jìn)行拍照并能保存到本地的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Element-UI結(jié)合遞歸組件實(shí)現(xiàn)后臺(tái)管理系統(tǒng)左側(cè)菜單
在Vue.js中使用遞歸組件可以方便地構(gòu)建多層級(jí)的菜單結(jié)構(gòu),遞歸組件適用于處理具有嵌套關(guān)系的數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09
vite創(chuàng)建vue3項(xiàng)目頁(yè)面引用public下js文件失敗解決辦法
Vue3相較于之前的版本有了不少變化,如引用全局Js文件,這篇文章主要給大家介紹了關(guān)于vite創(chuàng)建vue3項(xiàng)目頁(yè)面引用public下js文件失敗的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11