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: '廈門' },
{ 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://chabaoo.cn',
slogan: '美好生活，等待你的開(kāi)創(chuàng)！'
}
}
})
</script>
效果：
腳本之家
http://chabaoo.cn
美好生活，等待你的開(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://chabaoo.cn',
slogan: '美好生活，等待你的開(kāi)創(chuàng)！'
}
}
})
</script>
效果：
name : 腳本之家
url : http://chabaoo.cn
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://chabaoo.cn',
slogan: '美好生活，等待你的開(kāi)創(chuàng)！'
}
}
})
</script>
效果：
0 name:腳本之家
1 url:http://chabaoo.cn
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)文章
關(guān)于element ui中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element ui中el-cascader的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue實(shí)現(xiàn)仿iPhone懸浮球的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)仿iPhone懸浮球的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue 中filter的多種用法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-04-04
vue監(jiān)聽(tīng)頁(yè)面上的報(bào)錯(cuò)信息
這篇文章主要介紹了vue監(jiān)聽(tīng)頁(yè)面上的報(bào)錯(cuò)信息,window.onerror和window.addEventListener(‘error‘)的區(qū)別,需要的朋友可以參考下2023-10-10
Vue3中如何修改父組件傳遞到子組件中的值(全網(wǎng)少有!)
大家都知道,vue是具有單向數(shù)據(jù)流的傳遞特性,下面這篇文章主要給大家介紹了關(guān)于Vue3中如何修改父組件傳遞到子組件中值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
Vue中通過(guò)Vue.extend動(dòng)態(tài)創(chuàng)建實(shí)例的方法
這篇文章主要介紹了Vue中通過(guò)Vue.extend動(dòng)態(tài)創(chuàng)建實(shí)例的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Vue3中使用echarts的簡(jiǎn)單七個(gè)步驟(易懂,附緊急避坑)
近期在做一個(gè)vue3的項(xiàng)目,里面有個(gè)圖表需求,因公司之前使用第三方封裝的圖表缺少文檔,就去看了echars的官網(wǎng)文檔,引入原生echars來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用echarts的簡(jiǎn)單七個(gè)步驟,需要的朋友可以參考下2023-01-01
vue生命周期beforeDestroy和destroyed調(diào)用方式
這篇文章主要介紹了vue生命周期beforeDestroy和destroyed調(diào)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
今天小編就為大家分享一篇Vue最新防抖方案(必看篇)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
今天在修改 el-table 源碼過(guò)程中遇到一個(gè)頭大的問(wèn)題,原本修改編譯后,將 element的子目錄lib下的文件復(fù)制到項(xiàng)目的響應(yīng)目錄里就可以了,但是這次總出問(wèn)題,下面小編給大家分享element ui 添加自定義方法,感興趣的朋友一起看看吧2024-02-02