第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器

Posted songsongblue

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器相关的知识,希望对你有一定的参考价值。

 

  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     <!--1.导入Vue的包-->
  9     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
 10     <!-- <link rel="stylesheet" href="./lib/bootstrap.css"> -->
 11     <link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">   
 12     <!-- 需要用到Jquery吗???不推荐在vue中使用Jquery -->
 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           <!-- 在vue中,使用事件绑定机制,为元素指定处理函数的时候,如果加了小括号,就可以给函数传参了 -->
 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          <!--  之前,v-for中的数据,都是直接从data上的list中直接渲染过来的 -->
 57          <!--  现在,我们自定义了一个方法,同时,把所有的关键字,通过传参的形式,传递给了search方法 -->
 58          <!-- 在search方法内部,通过执行for循环,把所有符合搜索关键字的数据,保存到一个新数组中,返回 -->
 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 
 74       <script>
 75     //全局的过滤器,进行时间的格式化
 76     Vue.filter(dateFormat,function(dateStr,pattern="")
 77       //根据给定的时间字符串,得到特定的时间
 78       var dt = new Date(dateStr)
 79 
 80       //yyyy-mm-dd
 81       var y=dt.getFullYear() 
 82       var m=dt.getMonth()+1
 83       var d=dt.getDate()
 84 
 85       // return y+‘-‘+m+‘-‘+d
 86       //模板字符串  ``
 87       // return `$y-$m-$d`
 88 
 89       if(pattern.toLowerCase() ===yyyy-mm-dd)
 90         return `$y-$m-$d`
 91       else
 92         var hh=dt.getHours()
 93         var mm=dt.getMinutes()
 94         var ss=dt.getSeconds()
 95 
 96         return `$y-$m-$d $hh:$mm:$ss`
 97       
 98 
 99     )
100 
101 
102           //创建 Vue 实例,得到 ViewModel
103           var vm =  new Vue(
104               el:#app,
105         data:
106           id:‘‘,
107           name:‘‘,
108           keywords:‘‘,//搜索的关键字
109           list:[
110           id:1,name:奔驰,ctime:new Date(),
111           id:2,name:宝马,ctime:new Date()
112           ]
113         ,
114         methods:
115           add()//添加的方法
116             // console.log(‘ok‘)
117             //分析:
118             //1.获取到id 和name ,直接从data上面获取
119             //2.组织出一个对象
120             //3.把这个对下,调用数组的相关方法,添加到当前data上的list中
121             //4.注意:在Vue中,已经实现了数据的双向绑定,每当我们修改了data中的数据,Vue会默认监听到数据的改动,自动把最新的数据,应用到页面上;
122             //5.当我们意识到上面的第四部的时候,就证明大家已经入门Vue了,我们更多的是在进行VM中Model数据操作,同时,在操作Model数据的时候,指定的业务逻辑操作;
123 
124             var car=id:this.id,name:this.name,ctime:new Date()
125             this.list.push(car)
126             this.id=this.name=‘‘
127           ,
128           del(id)//根据Id删除数据
129             //分析:
130             //1.如何根据Id,找到要删除这一项的索引
131             //2.如果找到索引了,直接调用数组的splice方法
132 
133            /* this.list.some((item,i)=>
134               if(item.id==id)
135                 this.list.splice(i,1)
136                 //在数组的some方法中,如果return true,就会立即终止这个数组的后续循环
137                 return true;
138               
139             )*/
140 
141            var index = this.list.findIndex(item=>
142               if(item.id==id)
143                 return true;
144               
145             )
146             // console.log(index)
147             this.list.splice(index,1)
148           ,
149 
150           search(keywords)//根据关键字,进行数据的搜索
151           /*  var newList=[]
152             this.list.forEach(item=>
153               if(item.name.indexOf(keywords)!=-1)
154                 newList.push(item)
155               
156             )
157             return newList*/
158             //注意:forEach some filter findIndex   这些都属于数组的新方法,
159             //都会对数组中的每一项,进行遍历,执行相关操作;
160            return this.list.filter(item=>
161               // if(item.name.indexOf(keywords)!=-1)
162               //注意:在ES6中,为字符串提供了一个新方法,叫做String.prototype.includes(‘要包含的字符串‘)
163               //如果包含,则返回true,否则返回false
164               //contains
165               if(item.name.includes(keywords))
166                 return item
167               
168             )
169           
170         
171           );
172 
173       //过滤器的定义语法
174       // Vue.filter(‘过滤器的名称‘,function() )
175       //过滤器中的function,第一个参数,已经被规定死了,永远都是过滤器管道符前面传递过来的数据
176       /*Vue.filter(‘过滤器的名称‘,function(data) 
177         return data+‘123‘
178       )*/
179       </script>
180   </body>
181 </html>
182 
183 
184 <!-- 过滤器调用的时候的格式 name|过滤器的名称 -->
185 <!-- | 名称:管道符 -->

 

以上是关于第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器的主要内容,如果未能解决你的问题,请参考以下文章

第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

Vue入门到精通学习总结

10天从入门到精通Vue-vue的过滤器自定义指令Vue实例的生命周期

Java Web002 -- JS & Vue快速入门

谷粒商城学习日记(20)——Vue语法入门

第二章 Vue快速入门--12 事件修饰符的介绍