您的位置：首页 > 编程学习 > > 正文

vue渲染数据的过程（Vue前端高效开发之列表渲染指令）

更多时间：2021-10-22 07:46:25 类别：编程学习浏览量：2166

vue渲染数据的过程

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

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>
    <!--遍历数据-->
    <li id="app">
        <!--item：键-->
        <!--value：值-->
        <!--index：下标-->
        <ul v-for="(item,value,index) in people">
            <li>{{index}}:{{value}}:{{item}}</li>
        </ul>
    </li>
    <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列表渲染内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网！

标签：vue 列表渲染

上一篇：docker从一个容器中退出来（Docker容器迁移到其他服务器的5种方法详解）

下一篇：amazonawslinux服务器设置（如何在AWS EC2的Linux服务器上开放一个端口）

您可能感兴趣

vue渲染数据的过程（Vue前端高效开发之列表渲染指令）