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

Vue--使用watch、computed、filter方法来监控

时间:2017-11-19 11:12:49      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:ice   first   watch   tle   接受   express   meta   insert   list集合   

watch与computed、filter:

 

watch:监控已有属性,一旦属性发生了改变就去自动调用对应的方法

computed:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法

filter:js中为我们提供的一个方法,用来帮助我们对数据进行筛选

watch与computed的区别:


1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性


2.watch不会缓存数据,每次打开页面都会重新加载一次,
但是computed如果之前进行过计算他会将计算的结果缓存,如果再次请求会从缓存中
得到数据(所以computed的性能比watch更好一些)

一.watch监控使用小例子

 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="vue2.4.4.js"></script>
10 </head>
11 
12 <body>
13     <div id="app">
14         <input type="text" v-model="firstname">
15         <input type="text" v-model="lastname">
16         <span v-html="fullname"></span>
17     </div>
18 </body>
19 <script>
20     new Vue({
21         el: "#app",
22         data: {
23             firstname:"",
24             lastname:"",
25             fullname:""
26         },
27         // 实时监控firstname,lastname,一旦其中优质发生了改变就需要重新设置fullname的值
28         // 可以使用watch来实现这个功能
29         watch:{
30             // 将来只要firstname发生了改变它就会触发后面的这个方法
31             "firstname":function(){
32                 //只要firstname改变就应该相应的改变fullname
33                 this.fullname = this.firstname+this.lastname;
34             },
35             "lastname":function(){
36                 //只要lastname改变就应该相应的改变fullname
37                 this.fullname = this.firstname+this.lastname;
38             }
39         }
40     });
41 
42 </script>
43 
44 </html>

二.使用computed来监控

 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="vue2.4.4.js"></script>
10 </head>
11 
12 <body>
13     <div id="app">
14         <input type="text" v-model="firstname">
15         <input type="text" v-model="lastname">
16         {{fullName}}
17     </div>
18 </body>
19 <script>
20     new Vue({
21         el: "#app",
22         data: {
23             firstname:"小",
24             lastname:"追命",
25         },
26         computed:{
27             fullName:function() {
28                 return this.firstname+this.lastname ;
29             }
30         }
31     });
32 </script>
33 </html>

三.使用filter方法来筛选元素

 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     <script src="vue2.4.4.js"></script>
 9 </head>
10 <body>
11     
12 </body>
13 <script>
14     /**
15     filter:作用:过滤元素
16     操作:会遍历数据集合,去匹配所有的数据,将所有匹配成功的数据返回为一个新的数组
17     var newList = list.filter(function(item){
18         return 匹配的条件;
19                如果里面的item满足匹配条件就会返回true,那么这个filter方法也会将对应的item值
20                返回给新的数组
21     });
22 
23     */
24     var arr = [
25         {name:"abc",age:18},
26         {name:"hc",age:18},
27         {name:"dbc",age:16},
28         {name:"ayy",age:14},
29     ];
30     var str = "c";
31     var newArr = arr.filter(function(item){
32         // 查找newArr中所有name包含c的数据,然后返回
33         return  item.name.indexOf(str) != -1;
34     });
35     console.log(newArr); 
36 </script>
37 </html>

 四.使用filter方法完成品牌管理的搜索功能例子

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

 

Vue--使用watch、computed、filter方法来监控

标签:ice   first   watch   tle   接受   express   meta   insert   list集合   

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

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