Vue--使用watchcomputedfilter方法来监控
Posted QinXiao.Shou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue--使用watchcomputedfilter方法来监控相关的知识，希望对你有一定的参考价值。
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--使用watchcomputedfilter方法来监控的主要内容，如果未能解决你的问题，请参考以下文章