<div id="app"> <div>{{fullName}}</div> </div> <script> var vm = new Vue({ el: "#app", data: { name: "<h1>Dell</h1>", firstName: "sheng", lastName: "jun yong", age: 28 }, // 方式二 // 计算属性有缓存,第一次调用执行一次,只要与其相关属性不变,多次调用只会执行一次方法,节约性能 computed: { // 调用{{fullName}}无需括号,fullName相当于一个属性this.fullName,该方法的返回值就是属性值 fullName: { // vm.fullName 获取计算属性值,会调用get方法 get(){ console.log("------------") return this.firstName + " " + this.lastName }, // vm.fullName="bao gui" 设置计算属性值,会调用set方法 // name是fullName设置的值,会传进来 set(name){ var arr = name.split(" ") this.firstName = arr[0] this.lastName = arr[1] } } }, }) </script>
原文:https://www.cnblogs.com/shengjunyong/p/12150279.html