05-Vue的举例：列表功能

列表功能举例

步骤 1：列表功能

完整的代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         .table {
  11.             width: 800px;
  12.             margin: 20px auto;
  13.             border-collapse: collapse; /*这一行，不能少：表格的两边框合并为一条*/
  14.         }
  16.         .table th {
  17.             background: #0094ff;
  18.             color: white;
  19.             font-size: 16px;
  20.             border: 1px solid black;
  21.             padding: 5px;
  23.         }
  25.         .table tr td {
  26.             text-align: center;
  27.             font-size: 16px;
  28.             padding: 5px;
  29.             border: 1px solid black;
  30.         }
  31.     </style>
  33.     <script src="vue2.5.16.js"></script>
  34. </head>
  36. <body>
  38. <div id="app">
  40.     <table class="table">
  41.         <th>编号</th>
  42.         <th>名称</th>
  43.         <th>创建时间</th>
  44.         <th>操作</th>
  45.         <tr v-for="item in list">
  46.             <td>{{item.id}}</td>
  47.             <td>{{item.name}}</td>
  48.             <td>{{item.ctime}}</td>
  49.             <td><a href="#">删除</a></td>
  50.         </tr>
  51.     </table>
  52. </div>
  54. </body>
  56. <script>
  57.     var vm = new Vue({
  58.         el: '#app',
  59.         data: {
  60.             list: [{id: 1, name: '奔驰', ctime: new Date}, {id: 2, name: '大众', ctime: new Date}]
  61.         }
  62.     })
  64. </script>
  66. </html>

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

上方代码运行的效果：

05-Vue的举例：列表功能 - 图1

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

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

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

  1.             <tr v-show="list.length == 0">
  2.                 <td colspan="4">列表无数据</td>
  3.             </tr>

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

05-Vue的举例：列表功能 - 图2

步骤 3：item的添加

具体实现步骤如下：

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

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

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

完整的代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         .table {
  11.             width: 800px;
  12.             margin: 20px auto;
  13.             border-collapse: collapse; /*这一行，不能少：表格的两边框合并为一条*/
  14.         }
  16.         .table th {
  17.             background: #0094ff;
  18.             color: white;
  19.             font-size: 16px;
  20.             border: 1px solid black;
  21.             padding: 5px;
  22.         }
  24.         .table tr td {
  25.             text-align: center;
  26.             font-size: 16px;
  27.             padding: 5px;
  28.             border: 1px solid black;
  29.         }
  31.         .form {
  32.             width: 800px;
  33.             margin: 20px auto;
  34.         }
  36.         .form button {
  37.             margin-left: 10px;
  38.         }
  39.     </style>
  41.     <script src="vue2.5.16.js"></script>
  42. </head>
  44. <body>
  46. <div id="app">
  48.     <div class="form">
  50.         编号：<input type="text" v-model="formData.id">
  51.         名称：<input type="text" v-model="formData.name">
  53.         <button v-on:click="addData">添加</button>
  54.     </div>
  56.     <table class="table">
  57.         <th>编号</th>
  58.         <th>名称</th>
  59.         <th>创建时间</th>
  60.         <th>操作</th>
  61.         <tr v-show="list.length == 0">
  62.             <td colspan="4">列表无数据</td>
  63.         </tr>
  64.         <tr v-for="item in list">
  65.             <td>{{item.id}}</td>
  66.             <td>{{item.name}}</td>
  67.             <td>{{item.ctime}}</td>
  68.             <td><a href="#">删除</a></td>
  69.         </tr>
  70.     </table>
  71. </div>
  73. </body>
  75. <script>
  76.     var vm = new Vue({
  77.         el: '#app',
  78.         data: {
  79.             list: [{id: 1, name: '奔驰', ctime: new Date}, {id: 2, name: '大众', ctime: new Date}],
  80.             //用户添加的数据
  81.             formData: {
  82.                 id: 0,
  83.                 name: ""
  84.             }
  85.         },
  87.         methods: {
  88.             addData: function () {
  89.                 //将数据追加到list中
  90.                 var p = {id: this.formData.id, name: this.formData.name, ctime: new Date()};
  91.                 this.list.push(p);
  93.                 //清空页面上的文本框中的数据
  94.                 this.formData.id = 0;
  95.                 this.formData.name = '';
  96.             }
  97.         }
  98.     });
  100. </script>
  102. </html>

步骤 4：item的删除

html部分：

  1.             <!--绑定delete事件，根据括号里的参数进行删除-->
  2.             <td><a href="#" v-on:click="delData(item.id)">删除</a></td>

js部分：

  1.             delData: function (id) {
  2.                 // 0 提醒用户是否要删除数据
  3.                 if (!confirm('是否要删除数据?')) {
  4.                     //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
  5.                     return;
  6.                 }
  8.                 // 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值（在数组中的索引值）
  9.                 var index = this.list.findIndex(function (item) {
  10.                     return item.id == id
  11.                 });
  13.                 // 2.0 调用方法：list.splice(待删除的索引, 删除的元素个数)
  14.                 this.list.splice(index, 1);
  15.             }

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

  1.     // 根据id得到下标
  3.     // 默认去遍历list集合，将集合中的每个元素传入到function的item里，
  4.     var index = this.list.findIndex(function(item){
  5.     //根据item中的id属性去匹配传进来的id
  6.     //如果是则返回true ；否返回false,继续下面的一条数据的遍历，以此类推
  7.     return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的index
  8.     });

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

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

完整版代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         .table {
  11.             width: 800px;
  12.             margin: 20px auto;
  13.             border-collapse: collapse;  /*这一行，不能少：表格的两边框合并为一条*/
  14.         }
  16.         .table th {
  17.             background: #0094ff;
  18.             color: white;
  19.             font-size: 16px;
  20.             border: 1px solid black;
  21.             padding: 5px;
  22.         }
  24.         .table tr td {
  25.             text-align: center;
  26.             font-size: 16px;
  27.             padding: 5px;
  28.             border: 1px solid black;
  29.         }
  31.         .form {
  32.             width: 800px;
  33.             margin: 20px auto;
  34.         }
  36.         .form button {
  37.             margin-left: 10px;
  38.         }
  39.     </style>
  41.     <script src="vue2.5.16.js"></script>
  42. </head>
  44. <body>
  46.     <div id="app">
  48.         <div class="form">
  50.             编号：
  51.             <input type="text" v-model="formData.id"> 名称：
  52.             <input type="text" v-model="formData.name">
  54.             <button v-on:click="addData">添加</button>
  55.         </div>
  57.         <table class="table">
  58.             <th>编号</th>
  59.             <th>名称</th>
  60.             <th>创建时间</th>
  61.             <th>操作</th>
  62.             <tr v-show="list.length == 0">
  63.                 <td colspan="4">列表无数据</td>
  64.             </tr>
  65.             <tr v-for="item in list">
  66.                 <td>{{item.id}}</td>
  67.                 <td>{{item.name}}</td>
  68.                 <td>{{item.ctime}}</td>
  69.                 <!--绑定delete事件，根据括号里的参数进行删除-->
  70.                 <td>
  71.                     <a href="#" v-on:click="delData(item.id)">删除</a>
  72.                 </td>
  73.             </tr>
  74.         </table>
  75.     </div>
  77. </body>
  79. <script>
  80.     var vm = new Vue({
  81.         el: '#app',
  82.         data: {
  83.             list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
  84.             //用户添加的数据
  85.             formData: {
  86.                 id: 0,
  87.                 name: ""
  88.             }
  89.         },
  91.         methods: {
  92.             addData: function () {
  93.                 //将数据追加到list中
  94.                 var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
  95.                 this.list.push(p);
  97.                 //清空页面上的文本框中的数据
  98.                 this.formData.id = 0;
  99.                 this.formData.name = '';
  100.             },  //注意：方法之间用逗号隔开，这个逗号不要忘记了
  102.             delData: function (id) {
  103.                 // 0 提醒用户是否要删除数据
  104.                 if (!confirm('是否要删除数据?')) {
  105.                     //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
  106.                     return;
  107.                 }
  109.                 // 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
  110.                 var index = this.list.findIndex(function (item) {
  111.                     return item.id == id
  112.                 });
  114.                 // 2 调用方法：list.splice(待删除的索引, 删除的元素个数)
  115.                 this.list.splice(index, 1);
  116.             }
  119.         }
  120.     });
  122. </script>
  124. </html>

步骤 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()

  1.     search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item
  3.         //实现方式一：通过 indexOf() 进行匹配。
  4.         var newList = [];
  5.         this.list.forEach(item => {
  6.             if (item.name.indexOf(keywords) != -1) {  //只要不等于 -1，就代表匹配到了
  7.                 newList.push(item)
  8.             }
  9.         })
  10.         return newList
  11.     }

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

  1.         var str = 'smyhvae';
  3.         console.log(str.indexOf('s'));  //打印结果：0
  5.         console.log(str.indexOf(''));   //打印结果：0。（说明，即使去匹配空字符串，也是返回0）
  7.         console.log(str.indexOf('h'));  //打印结果：3
  9.         console.log(str.indexOf('x'));  //打印结果：-1 （说明，匹配不到任何字符串）

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

方式二： filter + includes()方法

  1.     search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item
  3.         var newList = this.list.filter(item => {
  4.             // 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')
  5.             //  如果包含，则返回 true ，否则返回 false
  6.             if (item.name.includes(keywords)) {
  7.                 return item
  8.             }
  9.         })
  11.         return newList
  12.     }

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

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

完整版代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         .table {
  11.             width: 800px;
  12.             margin: 20px auto;
  13.             border-collapse: collapse;/*这一行，不能少：表格的两边框合并为一条*/
  14.         }
  16.         .table th {
  17.             background: #0094ff;
  18.             color: white;
  19.             font-size: 16px;
  20.             border: 1px solid black;
  21.             padding: 5px;
  22.         }
  24.         .table tr td {
  25.             text-align: center;
  26.             font-size: 16px;
  27.             padding: 5px;
  28.             border: 1px solid black;
  29.         }
  31.         .form {
  32.             width: 800px;
  33.             margin: 20px auto;
  34.         }
  36.         .form button {
  37.             margin-left: 10px;
  38.         }
  39.     </style>
  41.     <script src="vue2.5.16.js"></script>
  42. </head>
  44. <body>
  46.     <div id="app">
  48.         <div class="form">
  50.             编号：
  51.             <input type="text" v-model="formData.id"> 名称：
  52.             <input type="text" v-model="formData.name">
  54.             <button v-on:click="addData">添加</button>
  55.             搜索：
  56.             <input type="text" v-model="keywords">
  58.         </div>
  60.         <table class="table">
  61.             <th>编号</th>
  62.             <th>名称</th>
  63.             <th>创建时间</th>
  64.             <th>操作</th>
  65.             <tr v-show="list.length == 0">
  66.                 <td colspan="4">列表无数据</td>
  67.             </tr>
  68.             <tr v-for="item in search(keywords)">
  69.                 <td>{{item.id}}</td>
  70.                 <td>{{item.name}}</td>
  71.                 <td>{{item.ctime}}</td>
  72.                 <!--绑定delete事件，根据括号里的参数进行删除-->
  73.                 <td>
  74.                     <a href="#" v-on:click="delData(item.id)">删除</a>
  75.                 </td>
  76.             </tr>
  77.         </table>
  78.     </div>
  80. </body>
  82. <script>
  83.     var vm = new Vue({
  84.         el: '#app',
  85.         data: {
  86.             list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
  87.             //用户添加的数据
  88.             formData: {
  89.                 id: '',
  90.                 name: ""
  91.             },
  92.             keywords: ""
  93.         },
  95.         methods: {
  96.             addData: function () {
  97.                 //将数据追加到list中
  98.                 var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
  99.                 this.list.push(p);
  101.                 //清空页面上的文本框中的数据
  102.                 this.formData.id = '';
  103.                 this.formData.name = '';
  104.             },  //注意：方法之间用逗号隔开，这个逗号不要忘记了
  106.             delData: function (id) {
  107.                 // 0 提醒用户是否要删除数据
  108.                 if (!confirm('是否要删除数据?')) {
  109.                     //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
  110.                     return;
  111.                 }
  113.                 // 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
  114.                 var index = this.list.findIndex(function (item) {
  115.                     return item.id == id
  116.                 });
  118.                 // 2 调用方法：list.splice(待删除的索引, 删除的元素个数)
  119.                 this.list.splice(index, 1);
  120.             },
  122.             search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item
  124.                 var newList = this.list.filter(item => {
  125.                     // 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')
  126.                     //  如果包含，则返回 true ，否则返回 false
  127.                     if (item.name.includes(keywords)) {
  128.                         return item
  129.                     }
  130.                 })
  132.                 return newList
  133.             }
  134.         }
  135.     });
  137. </script>
  139. </html>

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