腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Vue列表渲染v-for的使用案例詳解

更新時間：2023年03月29日 11:48:22 作者：小花皮豬

這篇文章主要介紹了Vue列表渲染(v-for的使用),本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

列表渲染

列表渲染的東西比較多，我們通過案例一步一步學(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)，還有很多小細節(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: