devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端开发学习 (三) 列表功能_列表展示功能的前端代码

作者：菜鸟追梦旅行 | 2024-03-28 09:17:00

赞

踩

列表展示功能的前端代码

一、列表功能

1、列表功能

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  10.     <style>
  11.         .table {
  12.             width: 800px;
  13.             margin: 20px auto;
  14.             /*合并多个单元格边框*/
  15.             border-collapse: collapse;
  16.  
  17.         }
  18.  
  19.         .table th {
  20.             background: #0094ff;
  21.             color: white;
  22.             font-size: 16px;
  23.             border: 1px solid black;
  24.             padding: 5px;
  25.  
  26.         }
  27.  
  28.         .table tr td {
  29.             text-align: center;
  30.             font-size: 16px;
  31.             padding: 5px;
  32.             border: 1px solid black;
  33.         }
  34.     </style>
  35.  
  36. </head>
  37.  
  38. <body>
  39. <div id="app1">
  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>
  53.  
  54. <script>
  55.  
  56.     var vm = new Vue({
  57.         el: '#app1',
  58.         data: {
  59.             list: [{id: 1, name: '奔驰', ctime: new Date}, {id: 2, name: '大众', ctime: new Date}]
  60.         }
  61.     });
  62. </script>
  63. </body>
  64.  
  65. </html>

数据是存放在data的list中的，将data中的数据通过v-for遍历给表格  

2、无数据时，增加提示

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  10.     <style>
  11.         .table {
  12.             width: 800px;
  13.             margin: 20px auto;
  14.             /*合并多个单元格边框*/
  15.             border-collapse: collapse;
  16.  
  17.         }
  18.  
  19.         .table th {
  20.             background: #0094ff;
  21.             color: white;
  22.             font-size: 16px;
  23.             border: 1px solid black;
  24.             padding: 5px;
  25.  
  26.         }
  27.  
  28.         .table tr td {
  29.             text-align: center;
  30.             font-size: 16px;
  31.             padding: 5px;
  32.             border: 1px solid black;
  33.         }
  34.     </style>
  35.  
  36. </head>
  37.  
  38. <body>
  39. <div id="app1">
  40.     <table class="table">
  41.         <thead>
  42.         <tr>
  43.             <th>编号</th>
  44.             <th>名称</th>
  45.             <th>创建时间</th>
  46.             <th>操作</th>
  47.         </tr>
  48.         </thead>
  49. <!--         在展示前通过v-if判断数据长度是否大于0-->
  50.         <tbody v-if="list.length > 0">
  51.             <tr v-for="item in list">
  52.                 <td>{{ item.id }}</td>
  53.                 <td>{{ item.name }}</td>
  54.                 <td>{{ item.ctime }}</td>
  55.                 <td><a href="#">删除</a></td>
  56.             </tr>
  57.         </tbody>
  58. <!--        当不大于0时展示无数据-->
  59.         <tbody v-else>
  60.             <tr>
  61.                 <td colspan="4">列表无数据</td>
  62.             </tr>
  63.         </tbody>
  64.     </table>
  65. </div>
  66.  
  67.  
  68. <script>
  69.  
  70.     var vm = new Vue({
  71.         el: '#app1',
  72.         data: {
  73.             list: [] //清除数据
  74.         }
  75.     });
  76. </script>
  77. </body>
  78.  
  79. </html>

 colspan="4"指的是让当前这个<td>横跨4个单元格的位置

 

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">
  3.  
  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.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  10.     <style>
  11.         .table {
  12.             width: 800px;
  13.             margin: 20px auto;
  14.             border-collapse: collapse;
  15.         }
  16.  
  17.         .table th {
  18.             background: #0094ff;
  19.             color: white;
  20.             font-size: 16px;
  21.             border: 1px solid black;
  22.             padding: 5px;
  23.         }
  24.  
  25.         .table tr td {
  26.             text-align: center;
  27.             font-size: 16px;
  28.             padding: 5px;
  29.             border: 1px solid black;
  30.         }
  31.  
  32.         .form {
  33.             width: 800px;
  34.             margin: 20px auto;
  35.         }
  36.  
  37.         .form button {
  38.             margin-left: 10px;
  39.         }
  40.     </style>
  41.  
  42. </head>
  43.  
  44. <body>
  45. <div id="app1">
  46.  
  47.     <div class="form">
  48.  
  49.         编号：<input type="text" v-model="formData.id">
  50.         名称：<input type="text" v-model="formData.name">
  51.  
  52.         <button v-on:click="addData">添加</button>
  53.     </div>
  54.  
  55.     <table class="table">
  56.         <th>编号</th>
  57.         <th>名称</th>
  58.         <th>创建时间</th>
  59.         <th>操作</th>
  60.         <tr v-show="list.length == 0">
  61.             <td colspan="4">列表无数据</td>
  62.         </tr>
  63.         <tr v-for="item in list">
  64.             <td>{{item.id}}</td>
  65.             <td>{{item.name}}</td>
  66.             <td>{{item.ctime}}</td>
  67.             <td><a href="#">删除</a></td>
  68.         </tr>
  69.     </table>
  70. </div>
  71.  
  72.  
  73. <script>
  74.  
  75.     var vm = new Vue({
  76.         el: '#app1',
  77.         data: {
  78.             list: [{id: 1, name: '奔驰', ctime: new Date}, {id: 2, name: '大众', ctime: new Date}],
  79.             //用户添加的数据
  80.             formData: {
  81.                 id: 0,
  82.                 name: ""
  83.             }
  84.         },
  85.  
  86.         methods: {
  87.             addData: function () {
  88.                 //将数据追加到list中
  89.                 var p = {id: this.formData.id, name: this.formData.name, ctime: new Date()};
  90.                 this.list.push(p);
  91.  
  92.                 //清空页面上的文本框中的数据
  93.                 this.formData.id = 0;
  94.                 this.formData.name = '';
  95.             }
  96.         }
  97.     });
  98. </script>
  99. </body>
  100.  
  101. </html>

4、item的删除表格数据

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  10.     <style>
  11.         .table {
  12.             width: 800px;
  13.             margin: 20px auto;
  14.             border-collapse: collapse;
  15.         }
  16.  
  17.         .table th {
  18.             background: #0094ff;
  19.             color: white;
  20.             font-size: 16px;
  21.             border: 1px solid black;
  22.             padding: 5px;
  23.         }
  24.  
  25.         .table tr td {
  26.             text-align: center;
  27.             font-size: 16px;
  28.             padding: 5px;
  29.             border: 1px solid black;
  30.         }
  31.  
  32.         .form {
  33.             width: 800px;
  34.             margin: 20px auto;
  35.         }
  36.  
  37.         .form button {
  38.             margin-left: 10px;
  39.         }
  40.     </style>
  41.  
  42. </head>
  43.  
  44. <body>
  45. <div id="app1">
  46.  
  47.     <div class="form">
  48.  
  49.         编号：
  50.         <input type="text" v-model="formData.id"> 名称：
  51.         <input type="text" v-model="formData.name">
  52.  
  53.         <button v-on:click="addData">添加</button>
  54.     </div>
  55.  
  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.  
  69.  
  70.             <!--绑定delete事件，根据括号里的参数进行删除-->
  71.             <td>
  72.                 <a href="#" v-on:click="delData(item.id)">删除</a>
  73.             </td>
  74.  
  75.         </tr>
  76.     </table>
  77. </div>
  78.  
  79.  
  80. <script>
  81.  
  82.     var vm = new Vue({
  83.         el: '#app1',
  84.         data: {
  85.             list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
  86.             formData: {
  87.                 id: 0,
  88.                 name: ""
  89.             }
  90.         },
  91.  
  92.         methods: {
  93.             addData: function () {
  94.                 //将数据追加到list中
  95.                 var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
  96.                 this.list.push(p);
  97.  
  98.                 //清空页面上的文本框中的数据
  99.                 this.formData.id = 0;
  100.                 this.formData.name = '';
  101.             },  //注意：方法之间用逗号隔开，这个逗号不要忘记了
  102.  
  103.  
  104.              //添加删除数据函数
  105.             delData: function (id) {
  106.                 //提醒用户是否要删除数据
  107.                 if (!confirm('是否要删除数据?')) {
  108.                     //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
  109.                     return;
  110.                 }
  111.  
  112.                 //调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
  113.                 var index = this.list.findIndex(function (item) {
  114.                     return item.id == id
  115.                 });
  116.  
  117.                 //调用方法：list.splice(待删除的索引, 删除的元素个数)
  118.                 this.list.splice(index, 1);
  119.             }
  120.  
  121.  
  122.         }
  123.     });
  124. </script>
  125. </body>
  126.  
  127. </html>

5：按条件筛选item

     我们要实现的效果是，在搜索框输入关键字 keywords，列表中仅显示匹配出来的内容

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

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

  在 search(keywords) 方法中，为了获取 list 数组中匹配的item，我们可以使用filter + includes()方法

案例
  1.     search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item
  2.  
  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.         })
  10.  
  11.         return newList
  12.     }

完整代码

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

 

二、自定义过滤器

Vue.js 允许我们自定义过滤器，可被用作一些常见的文本格式化

过滤器可以用在两种表达式中，mustache 插值表达式和 v-bind表达式

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示 

  1. #官方文档
  2. http://v1-cn.vuejs.org/guide/custom-filter.html

     我们可以用全局方法Vue.filter()自定义一个全局过滤器。这样的话，每一个Vue的对象实例（每一个VM实例）都可以拿到这个过滤器。 他需要接受两个参数(过滤器名称、过滤器函数)

比如说，我要将 （曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人） 这句 msg 中的“单纯”改为“邪恶”

1、定义插值表达式的方法

  1. <p>{{ msg | msgFormat }</p>
  2.  
  3.  
  4. #说明
  5. #1、管道符前面的msg是要把msg这段文本进行过滤
  6. #2、管道符后面的msgFormat，是通过msgFormat这个过滤器进行来操作

 2、定义过滤器函数

  1.         // Vue.filter 中的第一个参数是过滤器的名称，第二个参数是具体的过滤器函数
  2.         // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
  3.         Vue.filter('msgFormat', function (myMsg) {  // function 的第一个参数指的是管道符前面的 msg
  4.             // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
  5.             return myMsg.replace(/单纯/g, '邪恶')
  6.         })
  7.  
  8.  
  9. //说明
  10. //1、 上面代码中Vue.filter(‘过滤器的名称’, 具体的过滤器函数)`中的
  11.     //第一个参数指的就是过滤器的名称，他必须和管道符后面的名称完全一致
  12.     //第二个参数是具体的过滤器函数
  13.  
  14.  
  15. //2、过滤器函数function中，第一个参数指的管道符前面的msg
  16.  
  17.  
  18. //3、replace()方法是用来做字符串的替换的。第一个参数如果只写成单纯
  19. //那么就会只修改 msg 中的第一个`单纯`字样。所以这里就用正则去匹配msg 中所有的`单纯`字样

 3、案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  10.     <style>
  11.         .table {
  12.             width: 800px;
  13.             margin: 20px auto;
  14.             border-collapse: collapse;
  15.         }
  16.  
  17.         .table th {
  18.             background: #0094ff;
  19.             color: white;
  20.             font-size: 16px;
  21.             border: 1px solid black;
  22.             padding: 5px;
  23.         }
  24.  
  25.         .table tr td {
  26.             text-align: center;
  27.             font-size: 16px;
  28.             padding: 5px;
  29.             border: 1px solid black;
  30.         }
  31.  
  32.         .form {
  33.             width: 800px;
  34.             margin: 20px auto;
  35.         }
  36.  
  37.         .form button {
  38.             margin-left: 10px;
  39.         }
  40.     </style>
  41.  
  42. </head>
  43.  
  44. <body>
  45. <div id="app1">
  46.  
  47.     <!-- 通过 过滤器 msgFormat 对 msg 进行过滤-->
  48.     <p>{{ msg | msgFormat }}</p>
  49. </div>
  50.  
  51.  
  52. <script>
  53.     // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
  54.     Vue.filter('msgFormat', function (myMsg) {
  55.         // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
  56.         //将 myMsg 中的所有`单纯`字样，修改为`邪恶`
  57.         return myMsg.replace(/单纯/g, '邪恶')
  58.     })
  59.  
  60.  
  61.     var vm = new Vue({
  62.         el: '#app1',
  63.         data: {
  64.             msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
  65.         },
  66.         methods: {}
  67.     });
  68. </script>
  69. </body>
  70.  
  71. </html>

后续我们可以通过这个方法，将请求api返回的json数据，取出他们的名称，比如name然后转换成其他的中文名称展示

三、给过滤器添加多个参数

上面的举例代码中，`{{ msg | msgFormat }}`中，过滤器的调用并没有加参数，其实它还可以添加多个参数，接下来我们基于上面的代码进行改进

1、过滤器加一个参数

  1. #原代码
  2. <p>{{ msg | msgFormat }}</p>
  3.  
  4.  
  5. #修改后
  6.  
  7. #在插值表达式中添加一个参数
  8. <p>{{ msg | msgFormat('xxx') }}</p>

在插值表达式中添加携带参数后，也需要在过滤器函数中，添加(myMsg, arg2) 中的arg2就是接受传参，如下

  1.     // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
  2.     Vue.filter('msgFormat', function (myMsg, arg2) {
  3.         // 字符串的  replace 方法：第一个参数，除了可写一个 字符串之外，还可以定义一个正则；第二个参数代表要替换为上面的xxx
  4.         //将 myMsg 中的所有`单纯`字样，修改为 arg2
  5.         return myMsg.replace(/单纯/g, arg2)
  6.     })

 

全量代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  10.     <style>
  11.         .table {
  12.             width: 800px;
  13.             margin: 20px auto;
  14.             border-collapse: collapse;
  15.         }
  16.  
  17.         .table th {
  18.             background: #0094ff;
  19.             color: white;
  20.             font-size: 16px;
  21.             border: 1px solid black;
  22.             padding: 5px;
  23.         }
  24.  
  25.         .table tr td {
  26.             text-align: center;
  27.             font-size: 16px;
  28.             padding: 5px;
  29.             border: 1px solid black;
  30.         }
  31.  
  32.         .form {
  33.             width: 800px;
  34.             margin: 20px auto;
  35.         }
  36.  
  37.         .form button {
  38.             margin-left: 10px;
  39.         }
  40.     </style>
  41.  
  42. </head>
  43.  
  44. <body>
  45. <div id="app1">
  46.  
  47.     <!-- 通过 过滤器 msgFormat 对 msg 进行过滤-->
  48.     <p>{{ msg | msgFormat('xxx') }}</p>
  49. </div>
  50.  
  51.  
  52. <script>
  53.     // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
  54.     Vue.filter('msgFormat', function (myMsg, arg2) {
  55.         // 字符串的  replace 方法：第一个参数，除了可写一个 字符串之外，还可以定义一个正则；第二个参数代表要替换为上面的xxx
  56.         //将 myMsg 中的所有`单纯`字样，修改为 arg2
  57.         return myMsg.replace(/单纯/g, arg2)
  58.     })
  59.  
  60.     var vm = new Vue({
  61.         el: '#app1',
  62.         data: {
  63.             msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
  64.         },
  65.         methods: {}
  66.     });
  67. </script>
  68. </body>
  69.  
  70. </html>

2、过滤器加两个参数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  10.     <style>
  11.         .table {
  12.             width: 800px;
  13.             margin: 20px auto;
  14.             border-collapse: collapse;
  15.         }
  16.  
  17.         .table th {
  18.             background: #0094ff;
  19.             color: white;
  20.             font-size: 16px;
  21.             border: 1px solid black;
  22.             padding: 5px;
  23.         }
  24.  
  25.         .table tr td {
  26.             text-align: center;
  27.             font-size: 16px;
  28.             padding: 5px;
  29.             border: 1px solid black;
  30.         }
  31.  
  32.         .form {
  33.             width: 800px;
  34.             margin: 20px auto;
  35.         }
  36.  
  37.         .form button {
  38.             margin-left: 10px;
  39.         }
  40.     </style>
  41.  
  42. </head>
  43.  
  44. <body>
  45. <div id="app1">
  46.     <!-- 通过 过滤器 msgFormat 对 msg 进行过滤-->
  47.     <!-- 【重要】括号里的第一个参数代表 function 中的 arg2，括号里的第二个参数代表 function 中的 arg3-->
  48.     <p>{{ msg | msgFormat('【牛x】', '【参数arg3】') }}</p>
  49.  
  50. </div>
  51.  
  52.  
  53. <script>
  54.     // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
  55.     Vue.filter('msgFormat', function (myMsg, arg2, arg3) {
  56.         // 字符串的  replace 方法：第一个参数，除了可写一个 字符串之外，还可以定义一个正则；第二个参数代表要替换为 xxx
  57.         //将 myMsg 中的所有`单纯`字样，修改为`arg2 + arg3`
  58.         return myMsg.replace(/单纯/g, arg2 + arg3)
  59.     })
  60.  
  61.     var vm = new Vue({
  62.         el: '#app1',
  63.         data: {
  64.             msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
  65.         },
  66.         methods: {}
  67.     });
  68. </script>
  69. </body>
  70.  
  71. </html>

 

3、同时使用多个过滤器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  10.     <style>
  11.         .table {
  12.             width: 800px;
  13.             margin: 20px auto;
  14.             border-collapse: collapse;
  15.         }
  16.  
  17.         .table th {
  18.             background: #0094ff;
  19.             color: white;
  20.             font-size: 16px;
  21.             border: 1px solid black;
  22.             padding: 5px;
  23.         }
  24.  
  25.         .table tr td {
  26.             text-align: center;
  27.             font-size: 16px;
  28.             padding: 5px;
  29.             border: 1px solid black;
  30.         }
  31.  
  32.         .form {
  33.             width: 800px;
  34.             margin: 20px auto;
  35.         }
  36.  
  37.         .form button {
  38.             margin-left: 10px;
  39.         }
  40.     </style>
  41.  
  42. </head>
  43.  
  44. <body>
  45. <div id="app1">
  46.     <!-- 通过 两个过滤器（msgFormat、myFilter2）对 msg 进行过滤-->
  47.     <!-- 将 msg 交给第一个过滤器来处理，然后将处理的结果交给第二个过滤器来处理-->
  48.     <p>{{ msg | msgFormat('【牛x】', '【参数arg3】') | myFilter2}}</p>
  49.  
  50. </div>
  51.  
  52.  
  53. <script>
  54.     // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
  55.     Vue.filter('msgFormat', function (myMsg, arg2, arg3) {
  56.         // 字符串的  replace 方法：第一个参数，除了可写一个 字符串之外，还可以定义一个正则；第二个参数代表要替换为 xxx
  57.         //将 myMsg 中的所有`单纯`字样，修改为`arg2 + arg3`
  58.         return myMsg.replace(/单纯/g, arg2 + arg3)
  59.     })
  60.  
  61.     //定义第二个全局过滤器
  62.     Vue.filter('myFilter2', function (myMsg) {
  63.         //在字符串 msg 的最后面加上【后缀】
  64.         return myMsg + '【后缀】'
  65.     })
  66.  
  67.  
  68.     
  69.     var vm = new Vue({
  70.         el: '#app1',
  71.         data: {
  72.             msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
  73.         },
  74.         methods: {}
  75.     });
  76. </script>
  77. </body>
  78.  
  79. </html>

添加了多个过滤器，是将 msg 交给第一个过滤器来处理，然后将处理的结果交给第二个过滤器来处理 。  

4、时间格式化  案例1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  10.     <style>
  11.         .table {
  12.             width: 800px;
  13.             margin: 20px auto;
  14.             border-collapse: collapse;
  15.         }
  16.  
  17.         .table th {
  18.             background: #0094ff;
  19.             color: white;
  20.             font-size: 16px;
  21.             border: 1px solid black;
  22.             padding: 5px;
  23.         }
  24.  
  25.         .table tr td {
  26.             text-align: center;
  27.             font-size: 16px;
  28.             padding: 5px;
  29.             border: 1px solid black;
  30.         }
  31.  
  32.         .form {
  33.             width: 800px;
  34.             margin: 20px auto;
  35.         }
  36.  
  37.         .form button {
  38.             margin-left: 10px;
  39.         }
  40.     </style>
  41.  
  42. </head>
  43.  
  44. <body>
  45. <div id="app1">
  46.     {{ time }}
  47.     <br /> {{ time | datefmt }}
  48. </div>
  49.  
  50. <div id="app2">
  51.     {{ time | datefmt }}
  52. </div>
  53.  
  54.  
  55. <script>
  56.     // 定义一个名称为 datafmt的全局过滤器
  57.     Vue.filter('datefmt', function (input) {
  58.         // 过滤器的逻辑：将input的值格式化成 yyyy-MM-dd 字符串输出
  59.         var res = '';
  60.         var year = input.getFullYear();
  61.         var month = input.getMonth() + 1;
  62.         var day = input.getDate();
  63.  
  64.         res = year + '-' + month + '-' + day;
  65.  
  66.         return res;
  67.     });
  68.  
  69.  
  70.  
  71.     new Vue({
  72.         el: '#app1',
  73.         data: {
  74.             time: new Date()
  75.         }
  76.     })
  77.  
  78.     new Vue({
  79.         el: '#app2',
  80.         data: {
  81.             time: new Date()
  82.         }
  83.     });
  84. </script>
  85. </body>
  86.  
  87. </html>

5、时间格式化 案例2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  10.  
  11.  
  12. </head>
  13.  
  14. <body>
  15. <div id="app1">
  16.     2018-05-25T14:06:51.618Z
  17.     <br /> {{ '2018-05-25T14:06:51.618Z' | dateFormat }}
  18. </div>
  19.  
  20.  
  21. <script>
  22.     Vue.filter('dateFormat', function (dateStr, pattern = "") {
  23.         // 根据给定的时间字符串，得到特定的时间
  24.         var dt = new Date(dateStr)
  25.  
  26.         //   yyyy-mm-dd
  27.         var y = dt.getFullYear()
  28.         var m = dt.getMonth() + 1
  29.         var d = dt.getDate()
  30.  
  31.         // return y + '-' + m + '-' + d
  32.  
  33.         if (pattern.toLowerCase() === 'yyyy-mm-dd') { //如果调用过滤器的参数写的是 yyyy-mm-dd，那就按照这种  yyyy-mm-dd 的格式写
  34.             //这里用的是字符串模板
  35.             return `${y}-${m}-${d}`
  36.         } else {  //否则（比如说调用过滤器时不写参数），后面就补上 时-分-秒
  37.             var hh = dt.getHours()
  38.             var mm = dt.getMinutes()
  39.             var ss = dt.getSeconds()
  40.  
  41.             return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
  42.         }
  43.     })
  44.  
  45.     new Vue({
  46.         el: '#app1',
  47.         data: {
  48.             time: new Date()
  49.         }
  50.     });
  51. </script>
  52. </body>
  53.  
  54. </html>

6、时间格式化  案例3

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  10.  
  11.  
  12. </head>
  13.  
  14. <body>
  15. <div id="app1">
  16.     2018-05-25T14:06:51.618Z
  17.     <br /> {{ '2018-05-25T14:06:51.618Z' | dateFormat }}
  18. </div>
  19.  
  20.  
  21.  
  22. <script>
  23.     Vue.filter('dateFormat', function (dateStr, pattern) {
  24.         // 根据给定的时间字符串，得到特定的时间
  25.         var dt = new Date(dateStr)
  26.  
  27.         //   yyyy-mm-dd
  28.         var y = dt.getFullYear()
  29.         var m = (dt.getMonth() + 1).toString().padStart(2, '0')
  30.         var d = dt.getDate().toString().padStart(2, '0')
  31.  
  32.         if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') { //如果调用过滤器的参数写的是 yyyy-mm-dd，那就按照这种  yyyy-mm-dd 的格式写
  33.             //这里用的是字符串模板
  34.             return `${y}-${m}-${d}`
  35.         } else { //否则（比如说调用过滤器时不写参数），后面就补上 时-分-秒
  36.             var hh = dt.getHours().toString().padStart(2, '0')
  37.             var mm = dt.getMinutes().toString().padStart(2, '0')
  38.             var ss = dt.getSeconds().toString().padStart(2, '0')
  39.  
  40.             return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
  41.         }
  42.     })
  43.  
  44.     new Vue({
  45.         el: '#app1',
  46.         data: {
  47.             time: new Date()
  48.         }
  49.     });
  50. </script>
  51. </body>
  52.  
  53. </html>

四 、自定义私有过滤器

私有过滤器：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。

 

案例 日期格式化

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  10.  
  11.  
  12. </head>
  13.  
  14. <body>
  15. <div id="app1">
  16.     {{ time }}
  17.     <br />
  18.     {{ time | datefmt }}
  19. </div>
  20.  
  21.  
  22. <script>
  23.     new Vue({
  24.         el: '#app1',
  25.         data: {
  26.             time: new Date()
  27.         },
  28.         //在某一个vue对象内部定义的过滤器称之为私有过滤器，
  29.         //这种过滤器只有在当前vue对象el指定的监管的区域有用
  30.         filters: {
  31.             // input是自定义过滤器的默认参数，input的值永远都是取自于 | 左边的内容
  32.             datefmt: function (input) {
  33.                 // 定义过滤器的内容：将input的值格式化成 yyyy-MM-dd 字符串输出
  34.                 var res = '';
  35.                 var year = input.getFullYear();
  36.                 var month = input.getMonth() + 1;
  37.                 var day = input.getDate();
  38.  
  39.                 res = year + '-' + month + '-' + day;
  40.  
  41.                 return res;
  42.             }
  43.         }
  44.     });
  45. </script>
  46. </body>
  47.  
  48. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/329167
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号