亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue中列表渲染指令v-for的基本用法詳解

 更新時(shí)間:2023年04月21日 09:50:57   作者:夏志121  
v-for指令是在模板編譯的代碼生成階段實(shí)現(xiàn)的,當(dāng)遍歷數(shù)組或?qū)ο髸r(shí)需要使用列表渲染指令v-for。本文主要為大家介紹了v-for指令的基本用法,希望對(duì)大家有所幫助

一、原理概述

v-for指令時(shí)在模板編譯的代碼生成階段實(shí)現(xiàn)的,當(dāng)遍歷數(shù)組或?qū)ο髸r(shí)需要使用列表渲染指令v-for。當(dāng)Vue.js用v-for正在更新已渲染過(guò)的元素列表時(shí),它默認(rèn)用"就地復(fù)用"策略。如果數(shù)據(jù)項(xiàng)的數(shù)據(jù)被改變,Vue.js將不再移動(dòng)DOM元素來(lái)匹配數(shù)據(jù)項(xiàng)的改變,而是簡(jiǎn)單復(fù)用此處每個(gè)元素,并確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素。

二、基本用法

v-for是Vue.js的循環(huán)語(yǔ)句,它的表達(dá)式需要結(jié)合著in或者of來(lái)使用,類似item in items的形式。

(1)v-for循環(huán)普通數(shù)組

示例:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue-2.7.14.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        #root {
            width: 800px;
            height: 600px;
            background-color: yellowgreen;
            margin: 0 auto;
            text-align: center;
            padding: 30px;
        }
 
        .basic {
            margin: 0 auto;
            border: 1px solid black;
        }
    </style>
</head>
 
<body>
    <div id="root">
        <h2>v-for遍歷數(shù)組</h2>
        <div  class="basic">
            <p v-for="(item,index) in lists" :key="index">
                {{index}}------{{item}}
            </p>
        </div>
 
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                lists:["java程序設(shè)計(jì)","android程序設(shè)計(jì)","php程序設(shè)計(jì)","呵呵呵"],
 
            },
            methods: {
 
            }
        })
    </script>
</body>
 
</html>

執(zhí)行結(jié)果:

在表達(dá)式中,lists數(shù)組item當(dāng)前一條數(shù)據(jù),index代表當(dāng)前索引值。列表渲染也可以用in來(lái)代替of作為分隔符。代碼中還有一個(gè)key屬性,key屬性可以提高循環(huán)的性能。

(2)v-for循環(huán)對(duì)象

示例:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue-2.7.14.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        #root {
            width: 800px;
            height: 600px;
            background-color: yellowgreen;
            margin: 0 auto;
            text-align: center;
            padding: 30px;
        }
 
        .basic {
            margin: 0 auto;
            border: 1px solid black;
            line-height: 30px;
        }
    </style>
</head>
 
<body>
    <div id="root">
        <h2>v-for遍歷對(duì)象</h2>
        <div class="basic">
            <p v-for="(value,name,index) in car">
                {{index}}-----{{name}}------{{value}}
            </p>
        </div>
 
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                car: {
                    name: "奧迪a8",
                    color: "黑色",
                    Number: "124215dhsdhsdf"
                }
            },
            methods: {
 
            }
        })
    </script>
</body>
 
</html>

執(zhí)行結(jié)果:

(3)v-for循環(huán)對(duì)象數(shù)組

示例:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue-2.7.14.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        #root {
            width: 800px;
            height: 600px;
            background-color: yellowgreen;
            margin: 0 auto;
            text-align: center;
            padding: 30px;
        }
 
        .basic {
            margin: 0 auto;
            border: 1px solid black;
        }
    </style>
</head>
 
<body>
    <div id="root">
        <h2>v-for遍歷對(duì)象數(shù)組</h2>
        <div class="basic">
            <p v-for="(item,index) in persons">
                {{index}}-----{{item.id}}-----{{item.name}}-----{{item.age}}
            </p>
        </div>
 
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                persons: [
                    { id: "0001", name: "張三", age: "18" },
                    { id: "0002", name: "李四", age: "18" },
                    { id: "0003", name: "王五", age: "28" }
                ]
            },
            methods: {
 
            }
        })
    </script>
</body>
 
</html>

執(zhí)行結(jié)果:

(4)v-for迭代整數(shù) 

示例:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue-2.7.14.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        #root {
            width: 800px;
            height: 600px;
            background-color: yellowgreen;
            margin: 0 auto;
            text-align: center;
            padding: 30px;
        }
 
        .basic {
            margin: 0 auto;
            border: 1px solid black;
        }
    </style>
</head>
 
<body>
    <div id="root">
        <h2>v-for迭代整數(shù)</h2>
        <div  class="basic">
            <p v-for="count of 10">
                {{count}}
            </p>
        </div>
 
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
        })
    </script>
</body>
 
</html>

執(zhí)行結(jié)果:

到此這篇關(guān)于Vue中列表渲染指令v-for的基本用法詳解的文章就介紹到這了,更多相關(guān)Vue列表渲染指令v-for內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue.js?的過(guò)濾器你了解多少

    Vue.js?的過(guò)濾器你了解多少

    這篇文章主要為大家詳細(xì)介紹了Vue.js?的過(guò)濾器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-02-02
  • VUE中的打包刪除文件、圖片的HASH碼

    VUE中的打包刪除文件、圖片的HASH碼

    這篇文章主要介紹了VUE中的打包刪除文件、圖片的HASH碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 關(guān)于Vue?CLI3中啟動(dòng)cli服務(wù)參數(shù)說(shuō)明

    關(guān)于Vue?CLI3中啟動(dòng)cli服務(wù)參數(shù)說(shuō)明

    這篇文章主要介紹了關(guān)于Vue?CLI3中啟動(dòng)cli服務(wù)參數(shù)說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue中的 DOM與Diff詳情

    Vue中的 DOM與Diff詳情

    這篇文章主要介紹了Vue中的 DOM與Diff詳情,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助
    2022-08-08
  • vue3父組件異步props傳值子組件接收不到值問(wèn)題解決辦法

    vue3父組件異步props傳值子組件接收不到值問(wèn)題解決辦法

    這篇文章主要給大家介紹了關(guān)于vue3父組件異步props傳值子組件接收不到值問(wèn)題的解決辦法,需要的朋友可以參考下
    2024-01-01
  • 深入解析vue中的權(quán)限管理

    深入解析vue中的權(quán)限管理

    權(quán)限是對(duì)特定資源的訪問(wèn)許可,所謂權(quán)限控制,也就是確保用戶只能訪問(wèn)到被分配的資源,這篇文章主要介紹了vue的權(quán)限管理的相關(guān)知識(shí),需要的朋友可以參考下
    2022-06-06
  • vue中使用file-saver導(dǎo)出文件的全過(guò)程記錄

    vue中使用file-saver導(dǎo)出文件的全過(guò)程記錄

    這篇文章主要給大家介紹了關(guān)于vue中使用file-saver導(dǎo)出文件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2022-02-02
  • vue.js實(shí)現(xiàn)開(kāi)關(guān)(switch)組件實(shí)例代碼

    vue.js實(shí)現(xiàn)開(kāi)關(guān)(switch)組件實(shí)例代碼

    這篇文章介紹了vue.js實(shí)現(xiàn)開(kāi)關(guān)(switch)組件的實(shí)例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-06-06
  • 關(guān)于vue.extend和vue.component的區(qū)別淺析

    關(guān)于vue.extend和vue.component的區(qū)別淺析

    最近工作中遇到了vue.extend,vue.component,但二者之間的區(qū)別與聯(lián)系是什么呢?下面這篇文章主要給大家介紹了關(guān)于vue.extend和vue.component區(qū)別的相關(guān)資料,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。
    2017-08-08
  • vue v-for 使用問(wèn)題整理小結(jié)

    vue v-for 使用問(wèn)題整理小結(jié)

    使用v-for指令的時(shí)候遇到一個(gè)錯(cuò)誤問(wèn)題,具體錯(cuò)誤代碼在文章給大家列出,對(duì)vue v-for使用問(wèn)題感興趣的朋友跟隨小編一起學(xué)習(xí)吧
    2019-08-08

最新評(píng)論