Vue前端高效開發之列表渲染指令

Posted on by

v-for指令

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

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

語法：

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

例：

<body>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        ul {
            list-style: none;
        }
    </style>
    <!--遍歷數據-->
    <div id="app">
        <!--item：鍵-->
        <!--value：值-->
        <!--index：下標-->
        <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: "周潤發",
                    age: 65
                }
            }
        })
    </script>
</body>

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

計算屬性

一般在項目開發中，數據往往需要經過一些處理，除瞭利用基本的表達式和過濾器外，還可以使用vue的計算屬性，優化程序以及完成復雜計算。

例：實現模糊篩選以及增加和刪除。

首先通過v-for語句實現表格顯示數據

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

使用計算屬性實現模糊查詢

        <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;
                    })
                }
            }

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

實現添加及刪除

        <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) {
                    //刪除的是下標，刪除幾個
                    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方法僅能通過下標刪除，而傳過來的值是id所以這裡為瞭確保正確性就需要循環判斷下標，進行刪除操作。

這就是計算屬性。用於處理數據。

監聽屬性

vue除瞭計算屬性還提供瞭監聽屬性用於處理數據，用於觀察數據變動。

不同的是監聽屬性需要有兩個形參，一個是當前值，一個是更新後的值。

例：

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

相比於監聽屬性，明顯計算屬性會優於監聽屬性，所以在非特殊情況下，還是推薦優先使用計算屬性。

總結

到此這篇關於Vue前端高效開發之列表渲染指令的文章就介紹到這瞭,更多相關Vue列表渲染內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：