一个菜鸟的互联网技术分享博客
您的位置: 主页 > Vue计算属性的setter和getter
advertisement

Vue计算属性的setter和getter

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Vue计算属性的setter和getter</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}}  
  11.         </div>  
  12.           
  13.         <script>  
  14.             var vm = new Vue({  
  15.                 el:"#app",  
  16.                 data:{  
  17.                     firstName:"zhang",  
  18.                     lastName:"ren",  
  19.                 },  
  20.                 computed:{  
  21.                     fullName:{  
  22.                         get:function(){  
  23.                             return this.firstName + " " + this.lastName  
  24.                         },  
  25.                         set:function(value){  
  26.                             var arr = value.split(" ");  
  27.                             this.firstName = arr[0];  
  28.                             this.lastName = arr[1];  
  29.                             console.log(value)  
  30.                         }  
  31.                     }  
  32.                 }  
  33.             })  
  34.         </script>  
  35.     </body>  
  36. </html> 
zhangren.online
上一篇:Vue之计算属性、方法、侦听器
下一篇:eslint语法限制项目报错解决办法

您可能喜欢

​eslint语法限制项目报错解决办法

​eslint语法限制项目报错解决办法

​Vue的生命周期及代码实例

​Vue的生命周期及代码实例

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

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

​Vue计算属性的setter和getter

​Vue计算属性的setter和getter

回到顶部