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

Posted on by

本文就Vue中列表渲染做個簡單總結和使用演示:

列表渲染是用v-for指令根據綁定一組元素的選項來完成的，渲染格式可以自定義。

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>

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

v-for還可以遍歷對象，字符串，指定數字等等。如：

<!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="(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對象的標識，當數據發生變化時，vue會根據【新數據】生成【新的虛擬dom】，隨後Vue進行【新虛擬dom】和【舊虛擬dom】的差異對比

差異對比規則：

  • 先是在【舊虛擬dom】中找到與【新虛擬dom】相同的key
  • （1）若虛擬dom中的內容沒變，直接使用之前的真實dom
  • （2）若虛擬dom中的內容邊瞭，則生成新的真實dom,隨後替換掉頁面中之前的真實dom
  • 若在【舊虛擬dom】中沒有找到和【新虛擬dom】相同的key,就創建新的真實dom,隨後渲染到頁面中

3、列表過濾

列表過濾即在進行列表遍歷前對列表元素進行一次篩選，選擇出符合要求元素進行展示，如：

假如我們要過濾掉列表裡名為‘張三’的人：(可以用computer或者watch這兩個屬性實現)

<!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">

        <!-- 列表過濾 -->

        <!-- 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: {

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

            showNames(){

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

                    return n!="張三"

                })

            }

        },        

    })

</script>

</html>

效果：

到此這篇關於 vue中v-for指令完成列表渲染的文章就介紹到這瞭,更多相關 vue中v-for指令內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：