iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
0
自我挑戰組

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

(第四天)自我學習 - 如何使用 v-on 按鈕事件

  • 分享至 

  • xImage
  •  

按鈕 v-on 事件

今天要講的屬性是 v-on 這個屬性

v-on 這個屬性有一些比較常用的事件(keydown, keyup, click, dbclick, load)我們來用用最常用的click事件


//這裡的意思是當按鈕被按下去時會觸發 isClick 這個屬性,並傳一個 'true' 的字串
<button v-on:click="isClick('true')">點我</button>

那 Vue 裡面的 function 如何實作呢?

使用 methods 這個屬性時需要放在一開始 New 出來的 Vue 裡面;注意:在 function 裡面的所使用的變數都需要加上 this


var myApp = new Vue({
    //略過,
    data: {
        isButtonClick:'flase';
    },
    methods:{
        isClick:function(is_click){
            //把得到的值給 isButtonClick
            this.isButtonClick = is_click;
        },
    },
})

上一篇
(第三天)自我學習 - Vue 判斷與迴圈
下一篇
(第五天)自我學習 - Vue輸入並即時顯示
系列文
使用Vue製作簡單的 WorkBoard (30天)24
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言