iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
自我挑戰組

使用Vue製作簡單的 WorkBoard (30天)系列 第 7

(第七天)自我學習 - 監督者 Watch

Watch 的方便之處

在使用 Watch 就像監督者一樣,隨時監督著變數,只要一有變動監督者就會啟動,並且觸發事件。

我們來試試看如何使用 Watch 這個屬性吧!


//新增變數來讓監督者監督
data:{
    watch_data:'123',
    //那我在建立一個變數,證明監督有效
    watcher:''
},
//監督的屬性
watch:{
    //選擇監督的變數,就像是 function 一樣
    watch_data: function(){
        //只要監督的變數一有動作,馬上就會啟動這個 function
        watcher:'我正在監督你'
    }
}

那現在需要在 id = 'myApp' 裡面新增標籤

//使用input來改變變數
<input type="text" v-model="watch_data">
{{ watch_data }}
//監督者一開始不會有字,只要watch_data有動作,watcher就會出現字樣來
{{ watcher }}

來試試看吧!


上一篇
(第六天)自我學習 - Vue Component
下一篇
(第八天)自我學習 - 綁定標籤上的 Class
系列文
使用Vue製作簡單的 WorkBoard (30天)24

尚未有邦友留言

立即登入留言