iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
1
自我挑戰組

前端新手筆記-Vue.js系列 第 10

Day10 Vue computed 屬性介紹

本文同步發表於Andy's Blog

前言

開始前,我們先幫大家複習一下,這幾天介紹的內容(如下圖),若對於指令語法仍有疑問。大家可以自行到官網參考指令介紹喔!連結提供


開始今天主題介紹前,還記得我們在之文章說過Vue的Mustache語法嗎?若還不太清楚可以參考這篇文章Day5 Vue模板語法、V-text、V-html、V-once介紹

Mustache語法

簡述:我們可以在HTML上撰寫兩個大括號{{}},就可以很方便的將實體內資料綁定到畫面上。但是 Mustache語法本質上是用於簡單運算。

我們若遇到需要較為複雜的邏輯運算時候,這時候又全都寫在HTML上,便會造成程式難以閱讀和管理。
官網範例如下:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

因此,為了解決複雜的邏輯運算問題,我們需要使用computed屬性來幫我們解決問題!

Computed

用途:主要用來處理複雜邏輯運算。如:資料計算
寫法:{ [key: string]: Function | { get: Function, set: Function } }
寫法範例如下:

computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }

特性:
1.computed 底下宣告的方法必須是function,且會return一個值。
2.computed沒有參數可以帶,預設為一個唯獨屬性(預設僅有getter)

範例:
練習連結
HTML部分

<div id="app">
    <input type="text" v-model="message">
    <p> Original message: "{{ message }}"</p>
    <p> Computed reversed message: "{{ reversedMessage }}"</p>
</div>

JavaScript部分

var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello chunwen!'
      },
      computed: {
        // a computed getter
        reversedMessage: function () {
          // `this` points to the vm instance
          return this.message.split('').reverse().join('')
        }
      }
    });

Computed屬性:getter(讀取)、setter(寫入)

上面特性有提到,computed屬性中預設為getter(讀取),但如果我們今天想要針對Computed運算出來的結果進行更動的話,該怎麼處理呢?
我們先來看原始範例(沒有setter):
練習連結
HTML部分

<div id="app">
    <div>firstName: <input v-model="firstName" type="text"></div>
    <div>lastName: <input v-model="lastName" type="text"></div>
    <div>fullName: <input type="text" v-model="fullName"></div>
</div>

JS部分

var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'chunwen',
        lastName: 'YU'
      },
      computed:{
        fullName(){
          return this.firstName +' '+ this.lastName;
        }
      },
});

說明:你可以試著更動fullName欄位,這時你會發現firstNamelastName這兩個欄位值並不會更動,這時候你可能會好奇我們不是用v-model綁定實體內資料了嗎?為何畫面資料沒有進行更動呢?
並且跳出下面圖片錯誤

原因:就是因為Computed預設為一個唯獨屬性(僅有getter)

如果我們想要針對Computed運算出來的結果進行更動的話,我們可以將上面範例加入setter屬性,改寫範例如下:
連結
HTML部分

<div id="app">
    <div>firstName: <input v-model="firstName" type="text"></div>
    <div>lastName: <input v-model="lastName" type="text"></div>
    <div>fullName: <input type="text" v-model="fullName"></div>
</div>

JS部分

   computed:{
        fullName:{
        //getter
        get(){
          return this.firstName +' '+ this.lastName;
        },
        //setter
        set(val){
          console.log(val)  //觀察更新數值
          var name = val.split(' '); //將數值切分成兩部分
          this.firstName=name[0];
          this.lastName=name[1];          
        }
        }
      },
});

這時我們Computed出來的資料就可以進行變動摟~

參考資料

Vue.js Core 30天屠龍記(第5天)
官網計算屬性和偵聽器介紹
Vue.js 10 - 計算屬性(Computed)


上一篇
Day9 Vue指令V-if、V-show介紹
下一篇
Day11 Vue Watch介紹
系列文
前端新手筆記-Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言