<!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 Vue new new VM = ({ EL: "#app", Data: { firstName: 'Harold', lastName: 'Jim', Age: 44 is, fullName1: '', }, // calculated attributes computed: { the fullName () { the console.log ( "calculate a calculated attribute") return "computed attribute:" + this.firstName + "" + this.lastName this.lastName } }, Methods: { fullNameMethods () { the console.log ( "method for calculating a") return "Method:" + this.firstName + "" + this.lastName } }, // monitor Watch: { firstName () { Console .log ( "a calculated listening") this.fullName1 = this.firstName + "" + this.lastName; }, lastName () { the console.log ( "a calculated listening") this.fullName1 + = this.firstName "" + this.lastName; } } }) </script> </body> </html>