Vue列表渲染v-for的使用案例詳解
列表渲染
列表渲染的東西比較多，我們通過案例一步一步學(xué)習(xí)列表渲染的相關(guān)知識
基本列表
首先寫一個基本的列表,想要把persons列表里面的對象展示在li里面，我們可以使用一個指令：v-for
v-for
vue提供給我們做循環(huán)的指令，語法類似js的for in遍歷
v-for="person in persons"
使用v-for循環(huán)數(shù)組
列表數(shù)據(jù)就被循環(huán)出來了
上面只是簡單使用v-for做一個循環(huán)，還有很多小細(xì)節(jié)，逐一說下
細(xì)節(jié)問題
上面我們使用v-for做循環(huán)的時候，缺少了一個重要的屬性，那就是key，那么key的作用是什么呢？
key的使用
關(guān)于key的描述，官網(wǎng)是這么說的
key可以理解成一個唯一的標(biāo)識符，類似于身份證，作為數(shù)據(jù)的唯一憑證，我們在使用v-for做循環(huán)處理的時候，應(yīng)該是有:key去指定這個唯一標(biāo)識
雖然不寫key也不會報錯，也沒有任何警告，但是盡量還是按照規(guī)范寫上
v-for兩個參數(shù)
上面的案例，只是寫了一個參數(shù)進行處理，其實v-for是有兩個參數(shù)的
參數(shù)1是循環(huán)體的完整對象數(shù)據(jù)，參數(shù)2是索引下標(biāo)
<li v-for="a,b in persons" :key="a.id">
{{a}}-{}
</li>
注意：使用的使用不要少了冒號，是:key，不是key，不然就解析不了表達式了
使用index作為key
既然我們已經(jīng)知道了，第二個參數(shù)是索引，那么我們也可以把第二個參數(shù)作為key唯一標(biāo)識去使用
<li v-for="person,index in persons" :key="index">
{{person.name}}-{{person.age}}
</li> 
參數(shù)的括號可有可無
參數(shù)的括號是可以可有可無的，但是建議加上，不然一些老的腳手架可能會報錯
of代替in
v-for可以使用of代替in，作用是一樣的，和js簡直一模一樣
遍歷對象
難道v-for只能遍歷上面定義的persons數(shù)組類型嗎，當(dāng)然不是，也可以遍歷對象類型
遍歷字符串(用的少)
不僅僅可以遍歷數(shù)組和對象，還可以遍歷字符串
遍歷指定次數(shù)(用的少)
這種和遍歷字符串一樣，通常用的不多
總結(jié)
v-for指令
1.用于展示列表數(shù)據(jù)
2 語法 v-for=(item,index) in(of) xxx :key=“yyy”
3 可遍歷：數(shù)組(用的多)，對象(用的多)，字符串(用的少)，指定次數(shù)(用的少)
代碼奉上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 遍歷數(shù)組 -->
<h2>人員列表</h2>
<ul>
<li v-for="(person,index) of persons" :key="index">
{{person.name}}-{{person.age}}
</li>
</ul>
<!-- 遍歷對象 -->
<ul>
<h2>商品信息</h2>
<li v-for="(value,key) in shop" :key="key">
{{key}}-{{value}}
</li>
</ul>
<!-- 遍歷字符串 -->
<ul>
<h2>遍歷字符串</h2>
<li v-for="(char,index) in str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- 遍歷指定次數(shù) -->
<ul>
<h2>遍歷指定次數(shù)</h2>
<li v-for="(char,index) in str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- 遍歷指定次數(shù) -->
<ul>
<h2>遍歷指定次數(shù)</h2>
<li v-for="(number,index) in 10" :key="index">
{{index}}-{{number}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
const vm= new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'張三',age:'18'},
{id:'002',name:'李四',age:'19'},
{id:'003',name:'王五',age:'20'}
],shop:{
name:'可樂可樂',
price:'3.0'
},
str:'vue'
}
})
</script>
</html>
到此這篇關(guān)于Vue列表渲染(v-for的使用)的文章就介紹到這了,更多相關(guān)Vue列表渲染v-for內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue的土著指令和自定義指令的用法講解 ,需要的朋友可以參考下2018-02-02
vue3圖片剪裁插件vue-img-cutter使用小結(jié)
Vue.js是一款流行的JavaScript前端框架,很受用戶喜愛,這篇文章主要介紹了vue3圖片剪裁插件vue-img-cutter使用小結(jié),本文結(jié)合示例代碼講解的非常詳細(xì),感興趣的朋友一起看看吧2024-01-01
el-form的label和表單自適應(yīng)填滿一行且靠左對齊方式
這篇文章主要介紹了el-form的label和表單自適應(yīng)填滿一行且靠左對齊方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了一個Vue頁面的內(nèi)存泄露分析詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細(xì)介紹了vue+canvas實現(xiàn)拼圖小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
el-date-picker默認(rèn)結(jié)束為當(dāng)前時分秒的操作方法
在element?ui中的日期時間選擇組件中默認(rèn)是00:00,現(xiàn)在需求是點擊默認(rèn)結(jié)束時間為當(dāng)前時分秒,查了很多資料寫的都不準(zhǔn)確?,今天給大家分享el-date-picker默認(rèn)結(jié)束為當(dāng)前時分秒的操作方法,感興趣的朋友一起看看吧2024-01-01
今天小編就為大家分享一篇vue根據(jù)進入的路由進行原路返回的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
關(guān)于element-ui中@selection-change執(zhí)行兩次的問題
這篇文章主要介紹了關(guān)于element-ui中@selection-change執(zhí)行兩次的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue數(shù)據(jù)對象length屬性未定義問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue中實現(xiàn)在外部調(diào)用methods的方法(推薦)
下面小編就為大家分享一篇vue中實現(xiàn)在外部調(diào)用methods的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02