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