溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Vue列表渲染v-for如何使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue列表渲染v-for如何使用”吧！
列表渲染的東西比較多，我們通過案例一步一步學(xué)習(xí)列表渲染的相關(guān)知識(shí)
首先寫一個(gè)基本的列表,想要把persons列表里面的對(duì)象展示在li里面，我們可以使用一個(gè)指令：v-for
vue提供給我們做循環(huán)的指令，語法類似js的for in遍歷
v-for="person in persons"
使用v-for循環(huán)數(shù)組
列表數(shù)據(jù)就被循環(huán)出來了
上面只是簡單使用v-for做一個(gè)循環(huán)，還有很多小細(xì)節(jié)，逐一說下
上面我們使用v-for做循環(huán)的時(shí)候，缺少了一個(gè)重要的屬性，那就是key，那么key的作用是什么呢？
關(guān)于key的描述，官網(wǎng)是這么說的
key可以理解成一個(gè)唯一的標(biāo)識(shí)符，類似于身份證，作為數(shù)據(jù)的唯一憑證，我們在使用v-for做循環(huán)處理的時(shí)候，應(yīng)該是有:key去指定這個(gè)唯一標(biāo)識(shí)
雖然不寫key也不會(huì)報(bào)錯(cuò)，也沒有任何警告，但是盡量還是按照規(guī)范寫上
上面的案例，只是寫了一個(gè)參數(shù)進(jìn)行處理，其實(shí)v-for是有兩個(gè)參數(shù)的
參數(shù)1是循環(huán)體的完整對(duì)象數(shù)據(jù)，參數(shù)2是索引下標(biāo)
<li v-for="a,b in persons" :key="a.id">
{{a}}-{}
</li>
注意：使用的使用不要少了冒號(hào)，是:key，不是key，不然就解析不了表達(dá)式了
既然我們已經(jīng)知道了，第二個(gè)參數(shù)是索引，那么我們也可以把第二個(gè)參數(shù)作為key唯一標(biāo)識(shí)去使用
<li v-for="person,index in persons" :key="index">
{{person.name}}-{{person.age}}
</li>
參數(shù)的括號(hào)是可以可有可無的，但是建議加上，不然一些老的腳手架可能會(huì)報(bào)錯(cuò)
v-for可以使用of代替in，作用是一樣的，和js簡直一模一樣
難道v-for只能遍歷上面定義的persons數(shù)組類型嗎，當(dāng)然不是，也可以遍歷對(duì)象類型
不僅僅可以遍歷數(shù)組和對(duì)象，還可以遍歷字符串
這種和遍歷字符串一樣，通常用的不多
v-for指令
1.用于展示列表數(shù)據(jù)
2 語法 v-for=(item,index) in(of) xxx :key=“yyy”
3 可遍歷：數(shù)組(用的多)，對(duì)象(用的多)，字符串(用的少)，指定次數(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ù)組 -->
<h3>人員列表</h3>
<ul>
<li v-for="(person,index) of persons" :key="index">
{{person.name}}-{{person.age}}
</li>
</ul>
<!-- 遍歷對(duì)象 -->
<ul>
<h3>商品信息</h3>
<li v-for="(value,key) in shop" :key="key">
{{key}}-{{value}}
</li>
</ul>
<!-- 遍歷字符串 -->
<ul>
<h3>遍歷字符串</h3>
<li v-for="(char,index) in str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- 遍歷指定次數(shù) -->
<ul>
<h3>遍歷指定次數(shù)</h3>
<li v-for="(char,index) in str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- 遍歷指定次數(shù) -->
<ul>
<h3>遍歷指定次數(shù)</h3>
<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>感謝各位的閱讀，以上就是“Vue列表渲染v-for如何使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Vue列表渲染v-for如何使用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼