1 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 2 <body> 3 <div id="app"> 4 <p>初始值：{{name}}</p> 5 <p>翻轉值：{{reverseStr()}}</p> 6 <p>計算屬性翻轉值：{{reverse}}</p> 7 <button @click="setSeverseStr()">點擊調用set方法</button> 8 </div> 9 <script type="text/javascript" src="js/jquery.js" ></script> 10 <script type="text/javascript" src="js/vue.js" ></script> 11 <script> 12 let vm=new Vue({ 13 el:'#app', 14 data:{ 15 name:'Rose Jack', 16 firstName:'小', 17 lastName:'明' 18 }, 19 methods:{ 20 reverseStr(){ 21 return this.name.split(' ').reverse().join(' '); 22 }, 23 setSeverseStr(){ 24 this.reverse='xiao ming'; 25 } 26 }, 27 //計算屬性 28 computed:{ 29 reverse:{ 30 //get方法 31 get(){ 32 //return this.name.split(' ').reverse().join(' '); 33 return this.firstName+' '+this.lastName; 34 }, 35 //set方法 36 set(str){ 37 let nameArr=str.split(' '); 38 this.firstName=nameArr[0]; 39 this.lastName=nameArr[1]; 40 alert(this.firstName); 41 alert(this.lastName); 42 } 43 } 44 } 45 }) 46 </script> 47 </body>
點擊之后：
computed vs methods
我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴緩存，只有相關依賴發生改變時才會重新取值。
而使用 methods ，在重新渲染的時候，函數總會重新調用執行。