首页 > 其他 > 详细

vue 计算属性的setter getter

时间:2018-05-13 13:27:29      阅读:317      评论:0      收藏:0      [点我收藏+]
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue</title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <div>
10                 {{fullName}}
11                 {{age}}
12             </div>
13         </div>
14         
15         
16         <!-- 开发环境版本,包含了用帮助的命令行警告 -->
17         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
18         <script>
19             var app = new Vue({
20                 el: #app,
21                 data: {
22                     firstName: Tom,
23                     lastName: Lee,
24                     age: 33
25                 },
26                 computed: {
27                     fullName: {
28                         get: function() {
29                             return this.firstName + " " + this.lastName;
30                         },
31                         set: function(value) {
32                             var arr = value.split( );
33                             this.firstName = arr[0];
34                             this.lastName = arr[1];
35                             
36                         }
37                     }
38                     
39                 }
40             })
41         </script>
42     </body>
43 </html>

技术分享图片

set得到值后可以改变data的值

vue 计算属性的setter getter

原文:https://www.cnblogs.com/1032473245jing/p/9031694.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!