zoukankan      html  css  js  c++  java
  • Vue--使用watch、computed、filter方法来监控

    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              600px;
     13             margin: 10px auto;
     14         }
     15 
     16         .tb {
     17             border-collapse: collapse;
     18              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>
  • 相关阅读:
    如何为创建大量实例节省内存?
    4-5
    4-6
    4-4
    4-3
    4-2
    3-11
    4-1
    3-10
    3-8
  • 原文地址:https://www.cnblogs.com/mrszhou/p/7859001.html
Copyright © 2011-2022 走看看