當前位置:首頁 > IT技術 > 其他 > 正文

2補:v-for - 列表渲染的用法 和 他的參數(shù)
2022-05-31 17:12:21

?

因為寫著寫著出疑惑了

其實已經(jīng)講過這個,但是他的解析遍歷值可以是數(shù)組也可以是對象語法,所以就出來了這個問題:

我們先試一下遍歷 數(shù)組語法? 這個比較容易點:

<script?src="js/vue.js"></script>
<div?id="app">
????????<ul>
????????????<!--注意啊?這李的?item?你叫什么都可以?-->
????????????<li?v-for="item?in?array">{{item}}</li>
????????</ul>
</div>

<script>
????const?app?=?new?Vue({
????????el:?"#app",
????????data:{
????????????array:[1,2,3,4,5,6,7,8,9,10]
????????}
????})
</script>

這個沒什么問題啊? 直接解析array 從1開始 最后到 10 ,Vue只一個屬性 就是索引,當前遍歷的索引,寫法如下:

<div?id="app">
????????<ul>
????????????<!--注意啊?這里的?item??和??index?你叫什么都可以?-->
????????????<li?v-for="(item,index)?in?array">{{?item?+?"?是第?"?+?index?+?"條"?}}</li>
????????</ul>
</div>

<script>
????const?app?=?new?Vue({
????????el:?"#app",
????????data:{
????????????array:[1,2,3,4,5,6,7,8,9,10]
????????}
????})
</script>

對的!寫法就是 括號括起來 ,然后括號分開,那么既然 item 和 index 叫什么都可以 那Vue怎么分清楚誰是誰呢? 這就是我的困惑,所以你嘗試返回來 也是一樣的,索引永遠都是最后一個,所以我們

看一下對象語法型的 來 探究一下 這個 v-for 的參數(shù)是怎么樣來的:

?

我們來個 對象語法型的:

<div?id="app">
????<ul>
????????<li?v-for="(x1,x2,x3)?in?stu1">{{?x1?+?"???|???"?+?x2?+?"??|??"?+?x3?}}</li>
????????<!--?運行的知?Vue自動:?x1?值,?x2?:鍵?,?x3:?索引【永遠是最后的.】???????-->
????</ul>
</div>

<script>
????const?app?=?new?Vue({
????????el:?"#app",
????????data:?{
????????????stu1:{
????????????????name:?'bihu',
????????????????sex:?'男',
????????????????phone:?'8208208821'
????????????}
????????}
????})
</script>

允許結果:

2補:v-for - 列表渲染的用法 和 他的參數(shù)_字段

?

?所以呢 我們加強版:

?

<div?id="app">
????<ul>
????????<li?v-for="(x1,x2,x3)?in?object">{{?x1.name?+?"???|???"?+?x2?+?"???|???"?+?x3}}</li>
????????<!--?運行的知?Vue自動:?x1?值,?x2?:鍵?,?x3:?索引【永遠是最后的.】
?????????????但是!?這里的?x1(值)?要指定字段,因為這是?多層對象語法型?Vue將一直遍歷此字段的值
?????????-->
????</ul>
</div>

<script>
????const?app?=?new?Vue({
????????el:?"#app",
????????data:?{
????????????object:?{
????????????????stu1:{
????????????????????name:?'bihu',
????????????????????sex:?'男',
????????????????????phone:?'8208208821'
????????????????},?stu2:?{
????????????????????name:?'大佬',
????????????????????sex:?'男',
????????????????????phone:?'18823646885'
????????????????},?stu3:?{
????????????????????name:?'富婆',
????????????????????sex:?'女',
????????????????????phone:?'88888888'
????????????????}
????????????}
????????}
????})
</script>

所以我們得到結論:

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

Vue的v-for 列表展示中: 多個參數(shù)要用括號括起,逗號分隔, Vue會自動判斷分配:?

第一個是 值 , 第二個是 鍵 ,第三個 是 索引?! ?/p>

因為數(shù)組是沒鍵的 所以只能是兩個參數(shù)!

?

當多重對象語法的時,一定要指定 值 的字段,Vue會一直打印的,所以那些要你自己變通,搭配,當然你也可以只打印 值,已完成全部值的遍歷 ,例如:

<li?v-for="x1?in?object">{{?x1.name?+?"???|???"?+?x1.sex?+?"???|???"?+?x1.phone}}</li>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

?關于參數(shù)Vue是定死了的 單身調用位置你可以變通達到一個 想在那里顯示什么 就在那里顯示什么.

?

?

還有就是關于對象的 你如果想打印里面的全部值 你可以這樣寫:

<div?id="app">
????<ul>
????????<li?v-for="item?in?object">{{item}}</li>????????<!--直接打印出?object?中全部的內容-->
????</ul>
????<hr>
????<ul>
????????<li?v-for="item?in?object.stu1">{{item}}</li>???<!--直接打印出?object.stu1?中全部的內容-->
????</ul>
</div>

<script>
????const?app?=?new?Vue({
????????el:?"#app",
????????data:?{
????????????object:?{
????????????????stu1:{
????????????????????name:?'bihu',
????????????????????sex:?'男',
????????????????????phone:?'8208208821'
????????????????},?stu2:?{
????????????????????name:?'大佬',
????????????????????sex:?'男',
????????????????????phone:?'18823646885'
????????????????},?stu3:?{
????????????????????name:?'富婆',
????????????????????sex:?'女',
????????????????????phone:?'88888888'
????????????????}
????????????}
????????}
????})
</script>

2補:v-for - 列表渲染的用法 和 他的參數(shù)_javascript_02

?


作者:??咸瑜???



本文摘自 :https://blog.51cto.com/u

開通會員,享受整站包年服務立即開通 >