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

更新時間：2023年04月21日 09:50:57 作者：夏志121

v-for指令是在模板編譯的代碼生成階段實現(xiàn)的，當(dāng)遍歷數(shù)組或?qū)ο髸r需要使用列表渲染指令v-for。本文主要為大家介紹了v-for指令的基本用法，希望對大家有所幫助

一、原理概述

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

二、基本用法

v-for是Vue.js的循環(huán)語句，它的表達(dá)式需要結(jié)合著in或者of來使用，類似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è)計","android程序設(shè)計","php程序設(shè)計","呵呵呵"],
 
            },
            methods: {
 
            }
        })
    </script>
</body>
 
</html>

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

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

（2）v-for循環(huán)對象

示例：

<!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遍歷對象</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)對象數(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 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é)果：