IT廉連看——UniApp——事件綁定

這是我們上節課最終的樣式；

一、現在我有這樣一個需求，當我點擊“生在國旗下，長在春風里”它的顏色由紅色變為藍色，該怎么操作？

這時候我們需要一個事件的綁定，綁定一個單擊或者是點擊的這樣一個事件到我們這個元素上面；使用以下指令進行綁定：

v-on:click=""

點擊“生在國旗下，長在春風里”點擊后后臺打印click，證明此時我們綁定click事件是沒有問題的

接下來進行邏輯上的編寫：

此時我不希望它將click打印，我希望點擊它他能改變顏色，之前我們用v-bind來綁定了這樣的一個style，在data中我們給他設置成了一個白色，此時我就需要在methods中對數據進行一個改動，讓它變成黑色：

在methods中寫this.style1，我們是在給上方style1重新賦值，給一個其他的顏色。這個時候我綁定了click事件，當我點擊它的時候它會執行this.style1="font-size:20px;color:blue"這段代碼，將"font-size:20px;color:blue"這個字符串賦值給了data中寫好的style1;而data中的style1綁定的是<view>中的樣式，這里數據發生改變，頁面也會發生改變。

查看效果是否綁定成功

二、又有一個新需求，現在給class進行一個改變點擊消除背景顏色：

查看效果，字體變為藍色，后面的背景顏色也消失掉了。

三、這里我們除了可以綁定單擊事件我們還可以綁定其他的事件

在UniApp中支持很多的事件：

click: 'tap', // 點擊事件touchstart: 'touchstart', // 手指摸上去觸發touchmove: 'touchmove', // 滑動觸發touchcancel: 'touchcancel', // 當觸摸點被中斷時會觸發  touchcancel 事件，中斷方式基于特定實現而有所不同（例如， 創建了太多的觸摸點）。touchend: 'touchend', // 手指離開觸發tap: 'tap', // 點擊事件longtap: 'longtap', //推薦使用longpress代替 長按事件input: 'input', // 輸入框的值發生變化change: 'change', // 和 input 事件不一樣，value值改變并且失去焦點觸發submit: 'submit', // 表單提交觸發blur: 'blur', // 輸入框失去焦點觸發focus: 'focus', // 輸入框獲取焦點觸發reset: 'reset', // 表單重置觸發confirm: 'confirm', // 對話框確認事件columnchange: 'columnchange', // 某一列的值改變時觸發linechange: 'linechange', // iput行數發生變化觸發error: 'error',scrolltoupper: 'scrolltoupper', // 滾動到頂部觸發scrolltolower: 'scrolltolower', // 滾動到底部觸發scroll: 'scroll' // 滾動事件

    
?

最后，v-on指令也有簡寫：

@click=""