vue的计算属性： 1.在computed属性对象中定义计算属性的方法，在页面使用{{方法名}}来显示计算结果。 2.通过getter/setter实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算（计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算）。
<template> <div class="sea"> <div class="frost-content"> 姓名：<input v-model="name" type="text" placeholder="姓名"> 年龄：<input v-model="age" type="text" placeholder="年龄"> 个人信息（单向）：<input v-model="personSingle" type="text" placeholder="个人信息（单向）"> 个人信息（双向）：<input v-model="personDouble" type="text" placeholder="个人信息（单向）"> </div> </div> </template> <script> export default { name: 'ComputedListen', data() { return { name: '小太阳', age: 18 }; }, computed: { personSingle() { // 计算属性中的get方法，方法的返回值就是属性值 return this.name + ' ' + this.age; }, personDouble: { // 监听当前属性值的变化，当属性值发生变化时执行，更新相关属性数据 // value就是当前属性的最新属性值 get() { return this.name + ' ' + this.age; }, set(value) { const person = value.split(' '); this.name = person[0]; this.age = person[1]; } } } }; </script>