一、業務場景：前兩個文本框中輸入值，最后一個文本框自動監聽前面輸入的值
方式一：使用事件綁定機制@keyup，在methods中寫入監聽方法
<body> <div id="app"> firstName:<input type="text" v-model="firstname" @keyup="getFullName">+ lastName<input type="text" v-model="lastname" @keyup="getFullName2">= <input type="text" v-model="fullname" > <p>{{fullname}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: '' }, methods: { getFullName(){ this.fullname = this.firstname + this.lastname }, getFullName2(){ this.fullname = this.firstname + this.lastname } } }) </script> </body>
方法二：使用watch監聽文本變化
使用watch屬性 可以監視data中指定數據的變化 然后觸發這個watch中對應的處理方法
<body> <div id="app"> <input type="text" v-model="firstname" >+ <input type="text" v-model="lastname" >= <input type="text" v-model="fullname" > </div> <script> var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: '' }, methods: {}, watch: { //使用這個屬性 可以監視data中指定數據的變化 然后觸發這個watch中對應的處理方法 //firstname可加 可不加引號 但如果是first-name 必須要加引號 firstname: function(newVal, oldVal){ console.log('監視變化') this.fullname = newVal + '-' + this.lastname }, lastname: function (newVal) { this.fullname = this.firstname + '-' + newVal } } }) </script> </body>
方法三：使用computed計算文本值
在computed中可以定義一些屬性 這些屬性叫【計算屬性】 計算屬性的本質就是一個方法，只不過在使用這些計算屬性的時候 就把他們的名稱當做屬性來使用
注意：
- 計算屬性（方法）在引用時一定不要加() 直接把它當做普通屬性去使用就好了
- 只要計算屬性這個function內部所用到的任何data中的數據發生了變化 就會重新計算這個計算屬性的值
- 計算屬性的求職結果會被保存起來 方便下次直接使用 如果計算屬性方法中所依賴的任何數據都沒有發生變化 則不會重新對計算屬性 求職 這個可以提高運行效率
- 計算屬性中必須有return
<body> <div id="app"> <input type="text" v-model="firstname" >+ <input type="text" v-model="lastname" >= <input type="text" v-model="fullname" > <p>{{fullname}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '' }, methods: {}, computed: { fullname: function () { console.log('計算fullname被調用次數') return this.firstname + '-' + this.lastname } } }) </script> </body>
二、三種方法之間的比較
- computed屬性會被緩存 除非依賴的響應式屬性變化才會重新被計算 主要當做屬性來使用
- methods方法表示一個具體的操作 主要書寫業務邏輯
- watch一個對象 鍵是需要觀察的表達式 值是對應的回調函數 主要用來監聽某些特定數據的變化 從而進行某些具體的業務邏輯操作 可以看做是computed和methods的結合體