Vue前端高效开发之列表渲染指令

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

相比于监听属性，明显计算属性会优于监听属性，所以在非特殊情况下，还是推荐优先使用计算属性。