一个菜鸟的互联网技术分享博客
您的位置: 主页 > Vue之计算属性、方法、侦听器
advertisement

Vue之计算属性、方法、侦听器

计算属性代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Vue计算属性、方法、侦听器</title>  
  6.         <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <div id="app">  
  10.             {{fullName}} {{age}}  
  11.         </div>  
  12.           
  13.         <script>  
  14.             var vm = new Vue({  
  15.                 el:"#app",  
  16.                 data:{  
  17.                     firstName:"zhang",  
  18.                     lastName:"ren",  
  19.                     age:24  
  20.                 },  
  21.                 //计算属性(内置缓存),比methods方法性能高  
  22.                 computed:{  
  23.                     fullName:function(){  
  24.                         console.log("计算了一次!")  
  25.                         return this.firstName + " " + this.lastName  
  26.                     }  
  27.                 }  
  28.             })  
  29.         </script>  
  30.     </body>  
  31. </html>  

方法代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Vue计算属性、方法、侦听器</title>  
  6.         <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <div id="app">  
  10.             {{fullName()}} {{age}}  
  11.         </div>  
  12.           
  13.         <script>  
  14.             var vm = new Vue({  
  15.                 el:"#app",  
  16.                 data:{  
  17.                     firstName:"zhang",  
  18.                     lastName:"ren",  
  19.                     age:24  
  20.                 },  
  21.                 //方法(不如计算属性有效)  
  22.                 methods:{  
  23.                     fullName:function(){  
  24.                         console.log("计算了一次");  
  25.                         return this.firstName + " " +this.lastName;  
  26.                     }  
  27.                       
  28.                 }  
  29.             })  
  30.         </script>  
  31.     </body>  
  32. </html>  

侦听器代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Vue计算属性、方法、侦听器</title>  
  6.         <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <div id="app">  
  10.             {{fullName}} {{age}}  
  11.         </div>  
  12.           
  13.         <script>  
  14.             var vm = new Vue({  
  15.                 el:"#app",  
  16.                 data:{  
  17.                     firstName:"zhang",  
  18.                     lastName:"ren",  
  19.                     fullName:"zhang ren",  
  20.                     age:24  
  21.                 },  
  22.                 //侦听器(会存在一定的缓存)  
  23.                 watch:{  
  24.                     firstName:function(){  
  25.                         console.log("计算了一次")  
  26.                         this.fullName = this.firstName + " " + this.lastName;  
  27.                     },  
  28.                     lastName:function(){  
  29.                         console.log("计算了一次")  
  30.                         this.fullName = this.firstName + " " + this.lastName;  
  31.                     }  
  32.                 }  
  33.             })  
  34.         </script>  
  35.     </body>  
  36. </html>  

zhangren.online
上一篇:Vue的生命周期及代码实例
下一篇:Vue计算属性的setter和getter

您可能喜欢

回到顶部