<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算属性，方法，监听器</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{fullName}} {{age}}<br /> {{fullNameMethods()}}<br />{{fullName1}} </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { firstName: 'Harold', lastName: 'Jim', age: 44, fullName1: '', }, // 计算属性 computed: { fullName() { console.log("计算属性计算了一次") return "计算属性：" + this.firstName + " " + this.lastName } }, methods: { fullNameMethods() { console.log("方法计算了一次") return "方法：" + this.firstName + " " + this.lastName } }, // 监听 watch: { firstName(){ console.log("监听计算了一次") this.fullName1 = this.firstName + " " + this.lastName; }, lastName(){ console.log("监听计算了一次") this.fullName1 = this.firstName + " " + this.lastName; } } }) </script> </body> </html>
vue计算属性，方法，监听器
猜你喜欢
转载自www.cnblogs.com/Harold-Hua/p/11719902.html
今日推荐
周排行