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

2024-12-24 11:46:20

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列表渲染内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue列表页渲染优化详解

vue列表页渲染优化,具体内容如下想法初始化时,vue会对data做getter.setter改造,在现代浏览器里,虽然JS已经足够快,但仍然有优化空间. 列表页的数据结构为: list: [ // 每一项有不同的来源,不同来源的数据都不同,因此放到一个数组里 [{ sourceId: 'xmla', // 来源的唯一标识 id: 3001, // 资源的唯一标识 source: '喜马拉雅', // 来源 title: '昆曲之牡丹亭', imageUrl: 'http://x.baidu
Vue.js列表渲染绑定jQuery插件的正确姿势

使用v-for绑定列表时,有时候需要绑定如select2之类的jQuery插件. 需要在Vue根据数组内容生成dom元素之后,去找到该dom元素,然后 $().xxx绑定jQuery插件. 之前使用Vue.nextTick方法,在一次dom更新以后执行延迟回调,渲染jQuery插件. 然而这并不是一种很好的方式,有时候难以确定dom元素更新是否是我们需要关注的那个. 在列表中渲染Jquery插件的正确姿势,是使用自定义指令.自定义指令提供了一些钩子函数,可以准确的监听到dom元素与数据的绑定周期
Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 接下来给大家介绍vuejs单向绑定.双向绑定.列表渲染.响应函数基础知识,具体详情如下所示: (一)单向绑定 <div id="app"> {{ message }} </div> <sc
Vue.JS入门教程之列表渲染

你可以使用 v-repeat 指令来基于 ViewModel 上的对象数组渲染列表.对于数组中的每个对象,该指令将创建一个以该对象作为其 $data 对象的子 Vue 实例.这些子实例继承父实例的数据作用域,因此在重复的模板元素中你既可以访问子实例的属性,也可以访问父实例的属性.此外,你还可以通过 $index 属性来获取当前实例对应的数组索引. <ul id="demo"> <li v-repeat="items" class="ite
详解vuejs之v-for列表渲染

Vue.js是一个构建数据驱动的web界面的库.重点集中在MVVM模式的ViewModel层,因此非常容易与其它库或已有项目整合 Vue.js 的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单如下列表展示,当我们从后端接口或者json文件使用ajax获取数据之后现实到页面,我们有n中方式去把数据渲染到页面 1.使用js的for循环去遍历填充 2.ng的ng-repeat 今天我们使用vue.js的v-for 一.html <div class="shop_list_box
VUEJS实战之构建基础并渲染出列表（1）

前言我的JavaScript水平比较一般.好吧,是相当的一般.因此,对于最新的前端框架技术,实在是有点困难,但现实让我必须面对.因此,学习是唯一的出路. 纵向比较了N款前端框架,最终选择了VUE,为什么呢?理由如下: 1.angular 前途不明,1.x学习曲线高,并且好像被放弃了,而2则还没有正式推出. 2.react 比较厉害,但是没接触. 3.VUE简单,通过上手,比较适合我的思维和水平. 4.vue有中文文档,我看起来比较舒服. 既然决定学习vue,那么最好的学习方法就是实战.
Vue.js学习教程之列表渲染详解

本文主要给大家介绍了关于Vue.js列表渲染的相关资料,分享出来给大家参考学习,下面来看看详细的介绍: v-for 可以使用 v-for 指令基于一个数组渲染一个列表.这个指令使用特殊的语法,形式为item in items,items 是数据数组,item 是当前数组元素的别名: 示例: <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li>
Vue 监听列表item渲染事件方法

直入正题,不废话! 使用Vue渲染列表是很简单方便的,但如果需要在渲染item的时候去监听事件就无法实现了,楼主我翻遍了Vue的api也没找到合适的方法去解决,其中也提到使用watch和vue.nextClick 监听,但这些都不能实现,苦恼啊,不过机智的我还是想到了曲线救过的方法,利用过滤器来实现,代码如下 <li v-for="item in list"> {{item.content | setEvent item.id , item.name}}</li>
深入理解Vue 的条件渲染和列表渲染

这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记. 条件渲染 v-if 在 < template > 中配合 v-if 渲染一整组在使用 v-if 控制元素的时候,我们需要将它添加到这个元素上去.然而如果要切换很多元素的时候,一个个的添加就太麻烦了.这时候就可以使用 < template > 将一组元素进行包裹,并在上面使用 v-if.最终的渲染结果不会包含 < template > 元素. <template
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例

本文实例讲述了vue.js基于v-for实现批量渲染 Json数组对象列表数据.分享给大家供大家参考,具体如下: Vuejs的出现减轻了对DOM的直接操作,同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便.即使是复杂的 Json数组对象,也可以使用多层嵌套的 v-for 实现,格式如下: <div v-for="(item,index) in items"> <div v-for="(list,index) in item.lists&quo

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

v-for指令

计算属性

监听属性

总结

相关推荐

随机推荐