vue中v-for指令完成列表渲染

更新時(shí)間：2021年11月24日 09:21:11 作者：緣分锝天空

這篇文章主要給大家分享的是vue中v-for指令完成列表渲染，下面文化章就圍繞中v-for的相關(guān)資料在Vue中列表渲染做個(gè)簡(jiǎn)單總結(jié)和使用演示,需要的朋友可以參考一下，希望對(duì)大家有所幫助

1、列表遍歷

最基本的使用案例1：

<!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>列表渲染</title>

    <script src="../../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <ul>

            <li v-for="(name,index) in names">

                {{index}}-{{name}}

            </li>

        </ul>

    </div>  

</body>

<script>

    new Vue({

        el:'#app',

        data() {

            return {

                names:['張三','李四','王五','趙六']

            }

        },

    })

</script>

</html>

上面的例子中：通過(guò)v-for指令，綁定data中的names數(shù)組,以列表的形式遍歷出數(shù)組中的元素，其中name代表當(dāng)前數(shù)組的一個(gè)遍歷元素，index是當(dāng)前元素name在數(shù)組中的索引，輸出效果如下：

v-for還可以遍歷對(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>列表渲染</title>

    <script src="../../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- 遍歷對(duì)象 -->

        <ul>

            <li v-for="(propery,key) in student">

                {{key}}:{{propery}}

            </li>

        </ul>

        <!-- 遍歷字符串 -->

        <ol>

            <li v-for="char in str">{{char}}</li>

        </ol>

        <!-- 自定義輸出 -->

        <ul>

            <li v-for="num in 10">

                {{num}}

            </li>

        </ul>

    </div>  

</body>

<script>

    new Vue({

        el:'#app',

        data() {

            return {

                student:{

                    name:'李明',

                    age:23,

                    address:'大連'

                },

                str:'HelloWord'

            }

        },

    })

</script>

</html>

上面代碼的效果如下：

2、Vue中key的作用

作用：

key是虛擬dom對(duì)象的標(biāo)識(shí)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，vue會(huì)根據(jù)【新數(shù)據(jù)】生成【新的虛擬dom】，隨后Vue進(jìn)行【新虛擬dom】和【舊虛擬dom】的差異對(duì)比

差異對(duì)比規(guī)則：

先是在【舊虛擬dom】中找到與【新虛擬dom】相同的key
（1）若虛擬dom中的內(nèi)容沒(méi)變，直接使用之前的真實(shí)dom
（2）若虛擬dom中的內(nèi)容邊了，則生成新的真實(shí)dom,隨后替換掉頁(yè)面中之前的真實(shí)dom
若在【舊虛擬dom】中沒(méi)有找到和【新虛擬dom】相同的key,就創(chuàng)建新的真實(shí)dom,隨后渲染到頁(yè)面中

3、列表過(guò)濾

列表過(guò)濾即在進(jìn)行列表遍歷前對(duì)列表元素進(jìn)行一次篩選，選擇出符合要求元素進(jìn)行展示，如：

假如我們要過(guò)濾掉列表里名為‘張三'的人：(可以用computer或者watch這兩個(gè)屬性實(shí)現(xià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>列表渲染</title>

    <script src="../../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- 列表過(guò)濾 -->

        <!-- computer方式 -->

        <ul>

            <li v-for="(name,intdex) in showNames">{{name}}</li>

        </ul>

        <!-- watch方式 -->

        <ol>

            <li v-for="(name,index) in displayName">{{name}}</li>

        </ol>

    </div>  

</body>

<script>

    new Vue({

        el:'#app',

        data() {

            return {

                names:['張三','李四','王五','趙六'],

                displayName:[],

            }

        },

        watch: {

            name:{

                immediate:true,

                handler(val){

                    this.displayName=this.names.filter((n)=>{

                        return n!='張三'

                    })

                }

            }

        },

        computed: {

            // 假如我們要過(guò)濾掉名為'張三'的人

            showNames(){

                return this.names.filter((n)=>{

                    return n!="張三"

                })

            }

        },        

    })

</script>

</html>

效果：