Vue列表渲染v-for的使用案例詳解
列表渲染
列表渲染的東西比較多，我們通過案例一步一步學習列表渲染的相關(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)，還有很多小細節(jié)，逐一說下
細節(jié)問題
上面我們使用v-for做循環(huán)的時候，缺少了一個重要的屬性，那就是key，那么key的作用是什么呢？
key的使用
關(guān)于key的描述，官網(wǎng)是這么說的
key可以理解成一個唯一的標識符，類似于身份證，作為數(shù)據(jù)的唯一憑證，我們在使用v-for做循環(huán)處理的時候，應(yīng)該是有:key去指定這個唯一標識
雖然不寫key也不會報錯，也沒有任何警告，但是盡量還是按照規(guī)范寫上
v-for兩個參數(shù)
上面的案例，只是寫了一個參數(shù)進行處理，其實v-for是有兩個參數(shù)的
參數(shù)1是循環(huán)體的完整對象數(shù)據(jù)，參數(shù)2是索引下標
<li v-for="a,b in persons" :key="a.id">
{{a}}-{}
</li>
注意：使用的使用不要少了冒號，是:key，不是key，不然就解析不了表達式了
使用index作為key
既然我們已經(jīng)知道了，第二個參數(shù)是索引，那么我們也可以把第二個參數(shù)作為key唯一標識去使用
<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ù)組類型嗎，當然不是，也可以遍歷對象類型
遍歷字符串(用的少)
不僅僅可以遍歷數(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如何監(jiān)聽頁面的滾動的開始和結(jié)束，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本篇文章主要介紹了詳解Vue-cli 創(chuàng)建的項目如何跨域請求 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Vue?3引入了Composition?API，這是一套新的API用于編寫組件，作為Options?API的替代，這篇文章主要介紹了如何優(yōu)化?Vue.js?應(yīng)用程序,需要的朋友可以參考下2023-02-02
詳解Vue3中shallowRef和shallowReactive的使用
這篇文章主要為大家介紹了Vue3中shallowRef和shallowReactive函數(shù)的使用方法，文中的示例代碼講解詳細，對我們學習Vue有一定的幫助，需要的可以參考一下2022-07-07
本篇文章主要介紹了vue-router 組件復用問題詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細介紹了Vue分頁器實現(xiàn)原理，編寫了分頁器組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
Element-ui設(shè)置el-table表頭全選框隱藏或禁用
這篇文章主要給大家介紹了關(guān)于Element-ui設(shè)置el-table表頭全選框隱藏或禁用的相關(guān)資料,文中手把手教你實現(xiàn)el-table實現(xiàn)跨表格禁用選項,需要的朋友可以參考下2023-07-07
Vue的filters(本地)或filter(全局)過濾常用數(shù)據(jù)類型解析
這篇文章主要介紹了Vue的filters(本地)或filter(全局)過濾常用數(shù)據(jù)類型，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
如何利用Echarts根據(jù)經(jīng)緯度給地圖畫點畫線
最近工作中遇到了一個需求,需要利用echarts在地圖上面標記點位,所下面這篇文章主要給大家介紹了關(guān)于如何利用Echarts根據(jù)經(jīng)緯度給地圖畫點畫線的相關(guān)資料,需要的朋友可以參考下2022-05-05
今天小編就為大家分享一篇在vue中v-bind使用三目運算符綁定class的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09