vue 计算属性的setter getter
Posted 铜镜123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 计算属性的setter getter相关的知识，希望对你有一定的参考价值。
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的主要内容，如果未能解决你的问题，请参考以下文章
vue计算属性的getter和setter以及set方法的使用