iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

我的菜很有Vue味~系列 第 9

Day9 Vue Watch & Computed

昨天我們已經看到了computedmethod了今天的話已是一個非常好用的屬性Watch,那它能幹什麼呢?

Watch是什麼?

Watch可以說是讓我們監視某個值,當這個值變動的時候,就去做某些事情。
現在我們直接用程式連介紹watch吧!

一開始我們先在data裡去設firstName與lastName,然後在watch裡去監聽這兩筆資料,當其中一筆資料被更動時就會執行裡面的函數,切記data裡的資料名稱要和watch裡監聽的名稱要一樣喔。

這裡我們運用到了v-bind這個屬性,這屬性會在之後提到先拿來用就好。

大概寫完後我們就可以開網頁來看看,沒寫錯的話應該會跑出你自己data預測的內容。

接下來呢,要是我們去改動firstName或lastName的資料就會發現console會跑出fullName的資料,這是因為watch所監聽的資料有被改動所以它會一直去執行所對應的程式喔。

computed與今天的watch比較起來computed必不需要預先訂好初始資料(fullName)寫法也較watch更為簡便,可是相對computed而言,watch用來觀察資料變動較唯有優勢。

今天就先到這了,明天見~


上一篇
Day8 Vue Computed vs Method
下一篇
Day10 Vue模板語法 & V-text、V-html、V-once介紹
系列文
我的菜很有Vue味~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言