码迷,mamicode.com
首页 > 其他好文 > 详细

Vue--过滤器(私有和公有)

时间:2017-11-19 11:06:03      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:auto   class   tle   return   initial   ini   turn   href   默认   

一.过滤器的基本使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10      <div id="app">
11         {{Date()|dateFrm}}
12      </div>
13 </body>
14 <script src="vue2.4.4.js"></script>
15 <script>
16     new Vue({
17         el:"#app",
18         data:{},
19         methods:{},
20         mounted:{},
21         filters:{
22             // 过滤器中方法的第一个参数第一个参数是:当前调用过滤器的对象数据
23             dateFrm:function(time){
24                 // return "2017-11-16";
25                 console.log(time);
26                 
27             }
28         }
29     });
30 </script>
31 </html>

二.私有过滤器使用实例

  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     <style>
 10         #app {
 11             width: 600px;
 12             margin: 10px auto;
 13         }
 14 
 15         .tb {
 16             border-collapse: collapse;
 17             width: 100%;
 18         }
 19 
 20         .tb th {
 21             background-color: #0094ff;
 22             color: white;
 23         }
 24 
 25         .tb td,
 26         .tb th {
 27             padding: 5px;
 28             border: 1px solid black;
 29             text-align: center;
 30         }
 31 
 32         .add {
 33             padding: 5px;
 34             border: 1px solid black;
 35             margin-bottom: 10px;
 36         }
 37     </style>
 38 </head>
 39 
 40 <body>
 41     <div id="app">
 42         <div class="add">
 43             编号: <input id="id" v-color="color" v-focus="focus" type="text" v-model="id">品牌名称: <input v-model="name" type="text">
 44             <button @click="add">添加</button>
 45         </div>
 46         <div class="add">品牌名称:<input type="text"></div>
 47         <div>
 48             <table class="tb">
 49                 <tr>
 50                     <th>编号</th>
 51                     <th>品牌名称</th>
 52                     <th>创立时间</th>
 53                     <th>操作</th>
 54                 </tr>
 55                 <tr v-if="list.length <= 0">
 56                     <td colspan="4">没有品牌数据</td>
 57                 </tr>
 58                 <!--加入: key="index" 时候必须把所有参数写完整  -->
 59                 <tr v-for="(item,key,index) in list" :key="index">
 60                     <td>{{item.id}}</td>
 61                     <td>{{item.name}}</td>
 62                     <td>{{item.ctime | dateFrm("/") |addNoon}}</td>
 63                     <!-- 使用vue来注册事件时,我们在dom元素中是看不到的 -->
 64                     <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
 65                 </tr>
 66             </table>
 67         </div>
 68 
 69     </div>
 70 </body>
 71 
 72 </html>
 73 <script src="vue2.4.4.js"></script>
 74 <script>
 75     // 先将自定义指令定义好
 76     // directive有两个参数
 77     //参数一: 自定义指令 v-focus
 78     //参数二: 对象,对象中可以添加很多方法
 79     // 添加一个inserted方法:而这个方法中又有两个参数:
 80     //参数一:el 当前使用自定义指令的对象
 81     //参数二:obj 是指它(v-color="color" )后面设置的表达式
 82     //{expression:"color",value:"red",}
 83     Vue.directive("focus", {
 84         inserted: function (el, obj) {
 85             // console.log(el);
 86             el.focus();
 87         }
 88     });
 89     Vue.directive("color", {
 90         inserted: function (el, obj) {
 91             // obj.style.color = "red";
 92             obj.style.color = obj.value;//????????????
 93             console.log(obj.value);
 94         }
 95     });
 96 
 97     var vm = new Vue({
 98         el: "#app",
 99         data: {
100             color: "green",
101             id: 0,
102             name: ‘‘,
103             list: [
104                 { "id": 1, "name": "itcast", "ctime": Date() },
105                 { "id": 2, "name": "黑马", "ctime": Date() }
106             ]
107         },
108         // mounted(){
109         //     this.getFocus()
110         // },
111         methods: {
112             add: function () {
113                 //将id和namepush到list数组中
114                 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
115             },
116             del: function (id) {
117 
118                 // 根据id得到下标
119                 // 默认去遍历list集合,将集合中的每个元素传入到function的item里,
120                 var index = this.list.findIndex(function (item) {
121                     //根据item中的id属性来判断这个item是否是上面id中
122                     //对应的数据,如果是返回一个true ,否返回false,继续下面的一条数据的遍历,以此类推
123                     return item.id == id; //如果返回true,那么findIndex方法会将这个item对应的id返回到外面接受
124                 });
125                 // 根据下标在list集合中将对应的数据删除 
126                 // splice(开始删除的下标,删除的长度)               
127                 this.list.splice(index, 1);
128             }
129 
130         },
131         filters: {
132             // 私有过滤器:过滤器中方法的第一个参数第一个参数是:当前调用过滤器的对象数据
133             dateFrm: function (time,spliceStr) {
134                 // return "2017-11-16";
135                 var date = new Date(time);
136                 //得到年
137                 var year = date.getFullYear();
138                 // 得到月
139                 var month = date.getMonth() + 1;
140                 // 得到日
141                 var day = date.getDate();
142                 return year+spliceStr+month+spliceStr+day;
143             },
144             addNoon:function(time) {
145                 return time+"下午";
146             }
147         }
148     });
149 
150 </script>

 

 

二.全局/公有过滤器

  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     <style>
 10         #app {
 11             width: 600px;
 12             margin: 10px auto;
 13         }
 14 
 15         .tb {
 16             border-collapse: collapse;
 17             width: 100%;
 18         }
 19 
 20         .tb th {
 21             background-color: #0094ff;
 22             color: white;
 23         }
 24 
 25         .tb td,
 26         .tb th {
 27             padding: 5px;
 28             border: 1px solid black;
 29             text-align: center;
 30         }
 31 
 32         .add {
 33             padding: 5px;
 34             border: 1px solid black;
 35             margin-bottom: 10px;
 36         }
 37     </style>
 38 </head>
 39 
 40 <body>
 41     <div id="app">
 42         <div class="add">
 43             编号: <input id="id" v-color="color" v-focus="focus" type="text" v-model="id">品牌名称: <input v-model="name" type="text">
 44             <button @click="add">添加</button>
 45         </div>
 46         <div class="add">品牌名称:<input type="text"></div>
 47         <div>
 48             <table class="tb">
 49                 <tr>
 50                     <th>编号</th>
 51                     <th>品牌名称</th>
 52                     <th>创立时间</th>
 53                     <th>操作</th>
 54                 </tr>
 55                 <tr v-if="list.length <= 0">
 56                     <td colspan="4">没有品牌数据</td>
 57                 </tr>
 58                 <!--加入: key="index" 时候必须把所有参数写完整  -->
 59                 <tr v-for="(item,key,index) in list" :key="index">
 60                     <td>{{item.id}}</td>
 61                     <td>{{item.name}}</td>
 62                     <td>{{item.ctime | dateFrm("/") |addNoon}}</td>
 63                     <!-- 使用vue来注册事件时,我们在dom元素中是看不到的 -->
 64                     <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
 65                 </tr>
 66             </table>
 67         </div>
 68 
 69     </div>
 70 </body>
 71 
 72 </html>
 73 <script src="vue2.4.4.js"></script>
 74 <script>
 75     // 使用全局过滤器(公有过滤器)
 76     Vue.filter("dateFrm", function (time,spliceStr) {
 77         // return "2017-11-16";
 78         var date = new Date(time);
 79         //得到年
 80         var year = date.getFullYear();
 81         // 得到月
 82         var month = date.getMonth() + 1;
 83         // 得到日
 84         var day = date.getDate();
 85         return year + spliceStr + month + spliceStr + day;
 86     });
 87 
 88 
 89     // 先将自定义指令定义好
 90     // directive有两个参数
 91     //参数一: 自定义指令 v-focus
 92     //参数二: 对象,对象中可以添加很多方法
 93     // 添加一个inserted方法:而这个方法中又有两个参数:
 94     //参数一:el 当前使用自定义指令的对象
 95     //参数二:obj 是指它(v-color="color" )后面设置的表达式
 96     //{expression:"color",value:"red",}
 97     Vue.directive("focus", {
 98         inserted: function (el, obj) {
 99             // console.log(el);
100             el.focus();
101         }
102     });
103     Vue.directive("color", {
104         inserted: function (el, obj) {
105             // obj.style.color = "red";
106             obj.style.color = obj.value;//????????????
107             console.log(obj.value);
108         }
109     });
110 
111     var vm = new Vue({
112         el: "#app",
113         data: {
114             color: "green",
115             id: 0,
116             name: ‘‘,
117             list: [
118                 { "id": 1, "name": "itcast", "ctime": Date() },
119                 { "id": 2, "name": "黑马", "ctime": Date() }
120             ]
121         },
122         // mounted(){
123         //     this.getFocus()
124         // },
125         methods: {
126             add: function () {
127                 //将id和namepush到list数组中
128                 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
129             },
130             del: function (id) {
131 
132                 // 根据id得到下标
133                 // 默认去遍历list集合,将集合中的每个元素传入到function的item里,
134                 var index = this.list.findIndex(function (item) {
135                     //根据item中的id属性来判断这个item是否是上面id中
136                     //对应的数据,如果是返回一个true ,否返回false,继续下面的一条数据的遍历,以此类推
137                     return item.id == id; //如果返回true,那么findIndex方法会将这个item对应的id返回到外面接受
138                 });
139                 // 根据下标在list集合中将对应的数据删除 
140                 // splice(开始删除的下标,删除的长度)               
141                 this.list.splice(index, 1);
142             }
143 
144         }
145     });
146 
147 </script>

 

Vue--过滤器(私有和公有)

标签:auto   class   tle   return   initial   ini   turn   href   默认   

原文地址:http://www.cnblogs.com/mrszhou/p/7858994.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!