vue_计算属性getter和setter方法
Posted junlan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue_计算属性getter和setter方法相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{fullName}} --- {{age}} 计算属性 </div> </body> <script type="text/javascript"> let vm = new Vue({ el: ‘#app‘, data: { firstName: ‘Dell‘, lastName: ‘Less‘, age: 20 }, // 计算属性, 缓存机制 computed: { //计算属性的getter和setter方法 //数据渲染时会自动调用get方法 fullName: { get: function () { return this.firstName +‘ ‘+ this.lastName }, //数据变化时自动调用set方法 //现在再运行 vm.fullName = ‘John Doe‘ 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。 set: function(value) { let arr = value.split(‘ ‘) // 当fullName相关联的数据发生变化时相当于重新调用get方法 this.firstName = arr[0] this.lastName = arr[1] } } } }) </script> </html>
以上是关于vue_计算属性getter和setter方法的主要内容,如果未能解决你的问题,请参考以下文章
vue.js中,computed计算属性是不是只有一个getter和一个setter
使用 Getter 和 Setter 计算的 Vue 属性不会在 Webpack 中编译
Kotlin类与对象 ① ( 成员属性 | Kotlin 自动为成员字段生成 getter 和 setter 方法 | 手动设置成员的 getter 和 setter 方法 | 计算属性 )