<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname">+ <input type="text" v-model="middlename">+ <input type="text" v-model="lastname">= <input type="text" v-model="fullname"> <p>{{fullname}}</p> <p>{{fullname}}</p> <p>{{fullname}}</p> </ div>'OK' <! - only one output-> { // the computed may define attributes known as computational properties. Is the essential attribute of a calculation method, but when we use these calculations attributes, their names are directly used as attributes; will not calculate property as a way to call // Note 1: Calculation Properties in reference to time, we must not add parentheses () to call directly to him as ordinary attributes like to use // Note 2: as long as the data in any data to calculate the internal properties of this function, the use has changed, this value will be recalculated immediately calculate property // Note 3: evaluates computing attributes will be cached for next direct use (to improve operational efficiency), if any data attribute depends calculated, have not been changed, it will not be seeking re-calculate property value. ' FullName ' : function () { the console.log ( ' OK ' ); return the this .firstname + ' - ' + the this .middlename + ' - ' + the this .lastName; } } }); </ Script> </ body > </ HTML>