第二章 Vue快速入门-- 26 过滤器-定义私有过滤器

- 日理万妓 2021-11-04 11:38 335阅读 0赞

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   <title>Document</title>
      8   
      9   <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
     10   
     11   <link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">   
     12   
     13 
     14 </head>
     15 
     16 <body>
     17  <div id="app">
     18 
     19   <div class="panel panel-primary">
     20     <div class="panel-heading">
     21       <h3 class="panel-title">添加品牌</h3>
     22     </div>
     23     <div class="panel-body form-inline">
     24       <label>
     25         Id:
     26         <input type="text" class="form-control" v-model="id">
     27       </label>
     28 
     29       <label>
     30         Name:
     31         <input type="text" class="form-control" v-model="name">
     32       </label>
     33       
     34       <input type="button" value="添加" class="btn btn-primary" @click="add()">
     35 
     36       <label>
     37         搜索名称关键字：
     38         <input type="text" class="form-control" v-model="keywords">
     39       </label>
     40 
     41     </div>
     42   </div>
     43 
     44 
     45 
     46   <table class="table table-bordered table-hover table-striped">
     47     <thead>
     48       <tr>
     49         <th>Id</th>
     50         <th>Name</th>
     51         <th>Ctime</th>
     52         <th>Operation</th>
     53       </tr>
     54     </thead>
     55     <tbody>
     56      
     57      
     58      
     59      <tr v-for="item in search(keywords)" :key="item.id">
     60       <td>{
        {item.id}}</td>
     61       <td v-text="item.name"></td>
     62       <td>{
        { item.ctime | dateFormat()}}</td>
     63       <td>
     64         <a href="" @click.prevent="del(item.id)">删除</a>
     65       </td>
     66     </tr>
     67   </tbody>
     68 </table>
     69 
     70 
     71 </div>
     72 
     73 <div id="app2">
     74   <h3>{
        {dt|dateFormat}}</h3>
     75 </div>
     76 
     77 
     78 <script>
     79     //全局的过滤器，进行时间的格式化
     80     //所谓的全局过滤器，就是所有的VM实例都共享
     81     Vue.filter('dateFormat',function(dateStr,pattern=""){
     82       //根据给定的时间字符串，得到特定的时间
     83       var dt = new Date(dateStr)
     84 
     85       //yyyy-mm-dd
     86       var y=dt.getFullYear() 
     87       var m=dt.getMonth()+1
     88       var d=dt.getDate()
     89 
     90       // return y+'-'+m+'-'+d
     91       //模板字符串  ``
     92       // return `${y}-${m}-${d}`
     93 
     94       if(pattern.toLowerCase() ==='yyyy-mm-dd'){
     95         return `${y}-${m}-${d}`
     96       }else{
     97         var hh=dt.getHours()
     98         var mm=dt.getMinutes()
     99         var ss=dt.getSeconds()
    100 
    101         return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    102       }
    103 
    104     })
    105 
    106 
    107           //创建 Vue 实例，得到 ViewModel
    108           var vm =  new Vue({
    109               el:'#app',
    110         data:{
    111           id:'',
    112           name:'',
    113           keywords:'',//搜索的关键字
    114           list:[
    115           {id:1,name:'奔驰',ctime:new Date()},
    116           {id:2,name:'宝马',ctime:new Date()}
    117           ]
    118         },
    119         methods:{
    120           add(){
         //添加的方法
    121             // console.log('ok')
    122             //分析：
    123             //1.获取到id 和name ，直接从data上面获取
    124             //2.组织出一个对象
    125             //3.把这个对下，调用数组的相关方法，添加到当前data上的list中
    126             //4.注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；
    127             //5.当我们意识到上面的第四部的时候，就证明大家已经入门Vue了，我们更多的是在进行VM中Model数据操作，同时，在操作Model数据的时候，指定的业务逻辑操作；
    128 
    129             var car={id:this.id,name:this.name,ctime:new Date()}
    130             this.list.push(car)
    131             this.id=this.name=''
    132           },
    133           del(id){
         //根据Id删除数据
    134             //分析：
    135             //1.如何根据Id，找到要删除这一项的索引
    136             //2.如果找到索引了，直接调用数组的splice方法
    137 
    138            /* this.list.some((item,i)=>{
    139               if(item.id==id){
    140                 this.list.splice(i,1)
    141                 //在数组的some方法中，如果return true,就会立即终止这个数组的后续循环
    142                 return true;
    143               }
    144             })*/
    145 
    146             var index = this.list.findIndex(item=>{
    147               if(item.id==id){
    148                 return true;
    149               }
    150             })
    151             // console.log(index)
    152             this.list.splice(index,1)
    153           },
    154 
    155           search(keywords){
         //根据关键字，进行数据的搜索
    156           /*  var newList=[]
    157             this.list.forEach(item=>{
    158               if(item.name.indexOf(keywords)!=-1){
    159                 newList.push(item)
    160               }
    161             })
    162             return newList*/
    163             //注意：forEach some filter findIndex   这些都属于数组的新方法，
    164             //都会对数组中的每一项，进行遍历，执行相关操作；
    165             return this.list.filter(item=>{
    166               // if(item.name.indexOf(keywords)!=-1)
    167               //注意：在ES6中，为字符串提供了一个新方法，叫做String.prototype.includes('要包含的字符串')
    168               //如果包含，则返回true，否则返回false
    169               //contains
    170               if(item.name.includes(keywords)){
    171                 return item
    172               }
    173             })
    174           }
    175         }
    176       });
    177 
    178       //如何自定义一个私有的过滤器（）
    179       var vm2=new Vue({
    180         el:'#app2',
    181         data:{
    182          dt:new Date() 
    183        },
    184        methods:{},
    185         filters:{
         //定义私有过滤器   过滤器有两个条件【过滤器名称和处理函数】
    186           //过滤器调用的时候，采用的是就近原则，如果有过滤器和全局过滤器名称一致了，这时候 有线调用私有过滤器
    187           dateFormat:function(dateStr,pattern=''){
    188              //根据给定的时间字符串，得到特定的时间
    189              var dt = new Date(dateStr)
    190 
    191               //yyyy-mm-dd
    192               var y=dt.getFullYear() 
    193               var m=dt.getMonth()+1
    194               var d=dt.getDate()
    195 
    196               // return y+'-'+m+'-'+d
    197               //模板字符串  ``
    198               // return `${y}-${m}-${d}`
    199 
    200               if(pattern.toLowerCase() ==='yyyy-mm-dd'){
    201                 return `${y}-${m}-${d}`
    202               }else{
    203                 var hh=dt.getHours()
    204                 var mm=dt.getMinutes()
    205                 var ss=dt.getSeconds()
    206 
    207                 return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
    208               }
    209             }
    210           }
    211 
    212 })
    213 
    214       //过滤器的定义语法
    215       // Vue.filter('过滤器的名称',function(){ })
    216       //过滤器中的function，第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据
    217       /*Vue.filter('过滤器的名称',function(data){ 
    218         return data+'123'
    219       })*/
    220     </script>
    221   </body>
    222   </html>
    223 
    224 
    225   
    226

转载于:https://www.cnblogs.com/songsongblue/p/10990695.html