Vue前端高效開發(fā)之列表渲染指令

更新時間：2021年06月27日 08:29:54 作者：PROBIE_

這篇文章主要給大家介紹了關(guān)于Vue前端高效開發(fā)之列表渲染指令的相關(guān)資料,vue.js 使用的是 v-for 指令來處理組件元素的循環(huán)迭代邏輯,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

v-for指令

說起列表不得不提起循環(huán)，v-for指令便是可以在vue中實現(xiàn)循環(huán)的操作。

v-for指令是基于一個數(shù)組來重復(fù)渲染的指令，通常就用于顯示列表和表格。

語法：

<ul v-for="(鍵,值,索引) in 數(shù)組">
<li>{{索引}}:{{值}}:{{鍵}}</li>
</ul>

例：

<body>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        ul {
            list-style: none;
        }
    </style>
    <!--遍歷數(shù)據(jù)-->
    <div id="app">
        <!--item：鍵-->
        <!--value：值-->
        <!--index：下標(biāo)-->
        <ul v-for="(item,value,index) in people">
            <li>{{index}}:{{value}}:{{item}}</li>
        </ul>
    </div>
    <script src="js/Vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                text: "我們的征途是星辰大海！",
                arr: ["瑪卡巴卡", "唔西迪西", "小點點", "湯姆布利多", "叮叮車"],
                people: {
                    id: 1,
                    name: "周潤發(fā)",
                    age: 65
                }
            }
        })
    </script>
</body>

由例子可以看出，v-for指令不僅可以遍歷字符串，數(shù)組，還可以遍歷對象類型，根據(jù)鍵值和索引，以列表或者表格形式顯示。

計算屬性

一般在項目開發(fā)中，數(shù)據(jù)往往需要經(jīng)過一些處理，除了利用基本的表達式和過濾器外，還可以使用vue的計算屬性，優(yōu)化程序以及完成復(fù)雜計算。

例：實現(xiàn)模糊篩選以及增加和刪除。

首先通過v-for語句實現(xiàn)表格顯示數(shù)據(jù)

        <table class="table table-hover table-border">
            <tr class="info">
                <th>編號</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>介紹</th>
            </tr>
            <tr v-for="item in lists">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age+"歲"}}</td>
                <td>{{item.show}}</td>
            </tr>
        </table>

    <script>
        new Vue({
            el: "#app",
            data: {
                "lists": [{
                    "id": 1,
                    "name": "張三",
                    "age": 18,
                    "show": "張三介紹"
                }, {
                    "id": 2,
                    "name": "李四",
                    "age": 19,
                    "show": "李四介紹"
                }, {
                    "id": 3,
                    "name": "王五",
                    "age": 20,
                    "show": "王五介紹"
                }, {
                    "id": 4,
                    "name": "趙六",
                    "age": 21,
                    "show": "趙六介紹"
                }, {
                    "id": 5,
                    "name": "孫八",
                    "age": 22,
                    "show": "孫八介紹"
                }]
            }
    </script>

使用計算屬性實現(xiàn)模糊查詢

        <p><input type="text" v-model="selectkey" placeholder="請輸入"></p>

            computed: {
                newlist: function() {
                    var _this = this;
                    return _this.lists.filter(function(val) {
                        return val.name.indexOf(_this.selectkey) != -1;
                    })
                }
            }

把計算屬性以函數(shù)形式寫到computed選項中，將v-for語句遍歷的集合改為篩選后的newlist集合，通過判斷字符串中是否存在子字符串篩選lists集合中的數(shù)據(jù)，再把篩選后的數(shù)據(jù)交給v-for遍歷顯示。

實現(xiàn)添加及刪除

        <p class="input-group">
            <span class="input-group-addon">編號：</span>
            <input type="text" v-model="id" placeholder="請輸入編號" class="form-control">
        </p>
        <p class="input-group">
            <span class="input-group-addon">姓名：</span>
            <input type="text" v-model="name" placeholder="請輸入姓名" class="form-control">
        </p>
        <p class="input-group">
            <span class="input-group-addon">年齡：</span>
            <input type="text" v-model="age" placeholder="請輸入年齡" class="form-control">
        </p>
        <p class="input-group">
            <span class="input-group-addon">信息：</span>
            <input type="text" v-model="show" placeholder="請輸入信息" class="form-control">
        </p>
        <p class="input-group">
            <button @click="add()" class="btn btn-primary">添加信息</button>
        </p>

<td>
	<button v-on:click="dels(item.id)" class="btn btn-primary">刪除</button>
</td>

            methods: {
                add: function() {
                    var girl = {
                        "id": this.id,
                        "name": this.name,
                        "age": this.age,
                        "show": this.show
                    }
                    this.lists.push(girl);
                },
                dels: function(o) {
                    //刪除的是下標(biāo)，刪除幾個
                    for (let i = 0; i < this.lists.length; i++) {
                        if (this.lists[i].id == o) {
                            this.lists.splice(i, 1);
                        }
                    }
                }
            }

通過methods綁定事件，添加兩個按鈕事件方法add和dels用于處理添加和刪除操作。

添加就是使用push方法添加，刪除這里的splice方法僅能通過下標(biāo)刪除，而傳過來的值是id所以這里為了確保正確性就需要循環(huán)判斷下標(biāo)，進行刪除操作。

這就是計算屬性。用于處理數(shù)據(jù)。

監(jiān)聽屬性

vue除了計算屬性還提供了監(jiān)聽屬性用于處理數(shù)據(jù)，用于觀察數(shù)據(jù)變動。

不同的是監(jiān)聽屬性需要有兩個形參，一個是當(dāng)前值，一個是更新后的值。

例：

watch: {
        first: function (val) {
               this.full = val + ' ' + this.last
        },
        last: function (val) {
               this.full = this.first + ' ' + val
       }
}

相比于監(jiān)聽屬性，明顯計算屬性會優(yōu)于監(jiān)聽屬性，所以在非特殊情況下，還是推薦優(yōu)先使用計算屬性。