Vue基础进阶 之 计算属性的使用

计算属性的基本使用

初始小示例:

代码:

window.onload = () =>{
                
                new Vue({
                    el:'div',
                    data:{
                        msg:''
                    }
                    
                    
                    
                })
            }
            
            
        </script>
    </head>
    <body>
        <div>
            <input type="text" v-model="msg"/><br />
            原样显示:{{msg}}<br />
            大写显示:{{msg.toUpperCase()}}<br />
            
            
        </div>

直接在HTML中使用toUpperCase()方法,这样使得代码太长,影响代码的逻辑;因此就引入了计算属性的应用

 

Vue计算属性:

更强大的属性声明方式,可以对定义的属性进行逻辑处理数据监视;

计算属性的使用;

https://cn.vuejs.org/v2/guide/computed.html#计算属性

 

 

 

 计算属性的vue代码:

<script>
            window.onload = () =>{
                
                new Vue({
                    el:'div',
                    data:{
                        msg:''
                    },
                    computed:{
                        msg1:function(){
                            
                            return this.msg.toUpperCase();
                        }
                    }
                    
                    
                    
                })
            }
            
            
        </script>

 

html:

<body>
        <div>
            <input type="text" v-model="msg"/><br />
            原样显示:{{msg}}<br />
            大写显示:{{msg.toUpperCase()}}<br />
              计算属性显示:{{msg1}}<br />
            
            
        </div>
    </body>

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>计算属性的基本使用</title>
 6         <script type="text/javascript" src="../js/vue.js" ></script>
 7         <script>
 8             window.onload = () =>{
 9                 
10                 new Vue({
11                     el:'div',
12                     data:{
13                         msg:''
14                     },
15                     computed:{
16                         msg1:function(){
17                             
18                             return this.msg.toUpperCase();
19                         }
20                     }
21                     
22                     
23                     
24                 })
25             }
26             
27             
28         </script>
29     </head>
30     <body>
31         <div>
32             <input type="text" v-model="msg"/><br />
33             原样显示:{{msg}}<br />
34             大写显示:{{msg.toUpperCase()}}<br />
35               计算属性显示:{{msg1}}<br />
36             
37             
38         </div>
39     </body>
40 </html>
计算属性的基本使用

 

 

计算属性的getter和setter

 

 

computed:{
                        num1:function(){
                            
                            return this.num+10;
                        }
                    }

 

因此需要将num1转化为数据类型:

 

 

<script>
            window.onload = () =>{
                
                new Vue({
                    el:'div',
                    data:{
                        num:0
                    },
                    computed:{
                        num1:function(){
                            
                            return parseInt(this.num) +10;
                        }
                    }
                    
                    
                    
                })
            }
            
            
        </script>
    </head>
    <body>
        <div>
            <input type="text" v-model="num"/><br />
            原样显示:{{num}}<br />
            
              计算属性显示:{{num1}}<br />
            
            
        </div>
    </body>

 

 

直接修改num1:

直接修改报错的代码:

<script>
            window.onload = () =>{
                
                new Vue({
                    el:'div',
                    data:{
                        num:0
                    },
                    computed:{
                        num1:function(){
                            
                            return parseInt(this.num) +10;
                        }
                    }
                    
                    
                    
                })
            }
            
            
        </script>
    </head>
    <body>
        <div>
            <input type="text" v-model="num"/><br />
            原样显示:{{num}}<br />
            <input type="text" v-model="num1"/><br />
              计算属性显示:{{num1}}<br />
            
            
        </div>
    </body>

因此我们可以认为计算属性时默认是隐式的getter方法

 

 

 定义get与set方法:

        computed:{



                      num1:{
                          get:function(){
                              return parseInt(this.num) +10;
                          },
                          set:function(value){
                              return this.num=value;
                              
                          
                          }
                          
                          
                          
                      }
                    }

注意:在写显式的set方法时需要给它依赖的属性赋值

HTML:

<div>
            <input type="text" v-model="num"/><br />
            原样显示:{{num}}<br />
            <input type="text" v-model="num1"/><br />
              计算属性显示:{{num1}}<br />
            
            
        </div>

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>计算属性的getter和setter</title>
 6         <script type="text/javascript" src="../js/vue.js" ></script>
 7         <script>
 8             window.onload = () =>{
 9                 
10                 new Vue({
11                     el:'div',
12                     data:{
13                         num:0
14                     },
15                     computed:{
16 //                        num1:function(){
17 //                            
18 //                            return parseInt(this.num) +10;
19 //                        }
20 
21 
22 
23                       num1:{
24                           get:function(){
25                               return parseInt(this.num) +10;
26                           },
27                           set:function(value){
28                               return this.num=value;
29                               
30                           
31                           }
32                           
33                           
34                           
35                       }
36                     }
37                     
38                     
39                     
40                 })
41             }
42             
43             
44         </script>
45     </head>
46     <body>
47         <div>
48             <input type="text" v-model="num"/><br />
49             原样显示:{{num}}<br />
50             <input type="text" v-model="num1"/><br />
51               计算属性显示:{{num1}}<br />
52             
53             
54         </div>
55     </body>
56 </html>
计算属性的getter和setter

 

 

 

计算属性与方法的区别

计算属性有缓存机制,方法没有;

只要计算属性内相关依赖的值不发生改变,多次调用计算属性可以从缓存中获取值,不必重复计算;

方法每次调用都要重新执行一遍;

依赖值发生改变时都会发生调用;

示例:

属性与方法都可以将小写变为大写

 

其vue代码为:

<script>
            window.onload = () =>{
                
                new Vue({
                    el:'div',
                    data:{
                        msg:''
                    },
                    computed:{
                        msg1:function(){
                            console.log("$$$$computed");
                            
                            return this.msg.toUpperCase();
                        }
                    },
                    methods:{
                    
                      upperCase(){
                          console.log('####methods');
                            return this.msg.toUpperCase();
                            
                        },
                        show(){
                            console.log("计算属性"+this.msg);
                            console.log("方法的调用"+this.upperCase());
                        }
                        
                    }
                    
                    
                    
                    
                })
            }
            
            
        </script>

html:

<body>
        <div>
            <input type="text" v-model="msg"/><br />
            原样显示:{{msg}}<br />
            
              计算属性显示:{{msg1}}<br />
                方法显示:{{upperCase()}}<br />
                <button @click="show">show</button>
            
            
        </div>
    </body>

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>计算属性与方法的区别</title>
 6         <script type="text/javascript" src="../js/vue.js" ></script>
 7         <script>
 8             window.onload = () =>{
 9                 
10                 new Vue({
11                     el:'div',
12                     data:{
13                         msg:''
14                     },
15                     computed:{
16                         msg1:function(){
17                             console.log("$$$$computed");
18                             
19                             return this.msg.toUpperCase();
20                         }
21                     },
22                     methods:{
23                     
24                       upperCase(){
25                           console.log('####methods');
26                             return this.msg.toUpperCase();
27                             
28                         },
29                         show(){
30                             console.log("计算属性"+this.msg);
31                             console.log("方法的调用"+this.upperCase());
32                         }
33                         
34                     }
35                     
36                     
37                     
38                     
39                 })
40             }
41             
42             
43         </script>
44     </head>
45     <body>
46         <div>
47             <input type="text" v-model="msg"/><br />
48             原样显示:{{msg}}<br />
49             
50               计算属性显示:{{msg1}}<br />
51                 方法显示:{{upperCase()}}<br />
52                 <button @click="show">show</button>
53             
54             
55         </div>
56     </body>
57 </html>
计算属性与方法的区别

 

猜你喜欢

转载自www.cnblogs.com/jiguiyan/p/10720080.html
0条评论
添加一条新回复