search

01-04.Vue的举例：列表功能

hashtag
步骤 1：列表功能

完整的代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .table {
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse; /*这一行，不能少：表格的两边框合并为一条*/
        }

        .table th {
            background: #0094ff;
            color: white;
            font-size: 16px;
            border: 1px solid black;
            padding: 5px;

        }

        .table tr td {
            text-align: center;
            font-size: 16px;
            padding: 5px;
            border: 1px solid black;
        }
    </style>

    <script src="vue2.5.16.js"></script>
</head>

<body>

<div id="app">

    <table class="table">
        <th>编号</th>
        <th>名称</th>
        <th>创建时间</th>
        <th>操作</th>
        <tr v-for="item in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>
            <td><a href="#">删除</a></td>
        </tr>
    </table>
</div>

</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [{id: 1, name: '奔驰', ctime: new Date}, {id: 2, name: '大众', ctime: new Date}]
        }
    })

</script>

</html>

代码分析：数据是存放在data的list中的，将data中的数据通过v-for遍历给表格。

上方代码运行的效果：

hashtag
步骤 2：无数据时，增加提示

如果list中没有数据，那么表格中就会只显示表头<th>，这样显然不太好看。

为此，我们需要增加一个v-if判断：当数据为空时，显示提示。如下：

代码解释：colspan="4"指的是让当前这个<td>横跨4个单元格的位置。如下：

hashtag
步骤 3：item的添加

具体实现步骤如下：

（1）用户填写的数据单独存放在data属性里，并采用v-model进行双向绑定。

（2）用户把数据填好后，点击add按钮。此时需要增加一个点击事件的方法，将data中的数据放到list中（同时，清空文本框中的内容）。

（3）将数据展示出来。v-for有个特点：当list数组发生改变后，vue.js就会自动调用v-for重新将数据生成，这样的话，就实现了数据的自动刷新。

完整的代码如下：

hashtag
步骤 4：item的删除

html部分：

js部分：

代码解释：find()和findIndex()是ES6中为数组新增的函数。详细解释如下：

也就是说，我们是根据 item.id 找到这个 item 是属于list 数组中的哪个index索引。找到了index，就可以根据index来删除数组中的那个元素了。

当item被删除后，v-for会被自动调用，进而自动更新view。

完整版代码：

hashtag
步骤 5：按条件筛选item

现在要求实现的效果是，在搜索框输入关键字 keywords，列表中仅显示匹配出来的内容。也就是说：

  • 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的。

  • 现在， 我们在使用v-for进行遍历显示的时候，不能再遍历全部的 list 了；我们要自定义一个 search 方法，同时，把keywords作为参数，传递给 search 方法。即v-for="item in search(keywords)"。

在 search(keywords) 方法中，为了获取 list 数组中匹配的item，我们可以有两种方式实现。如下。

方式一：采用forEach + indexOf()

上方代码中， 我们要注意 indexOf(str) 的用法。举例如下：

上方代码中，也就是说，如果参数为空字符串，那么，每个item都能匹配到。

方式二： filter + includes()方法

注意：forEach some filter findIndex，这些都属于数组的新方法，都会对数组中的每一项，进行遍历，执行相关的操作。这里我们采用数组中的 filter 方法，

总的来说，方式二的写法更优雅，因为字符串的 includes()方法确实很实用。

完整版代码如下：

备注：在1.x 版本中可以通过filterBy指令来实现过滤，但是在2.x中已经被废弃了。

Previous01-03.Vue的系统指令（二）Next01-05.自定义过滤器：时间格式化举例

Last updated