vue樣式綁定與事件處理器的基本使用

Vue.js 樣式綁定

class 與 style 是 HTML 元素的屬性，用于設置元素的樣式，我們可以用 v-bind 來設置樣式屬性。

Vue.js v-bind 在處理 class 和 style 時， 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。

將 isActive 設置為 true 顯示了一個綠色的 div 塊，如果設置為 false 則不顯示

我們也可以在對象中傳入更多屬性用來動態切換多個 class 。

我們也可以直接綁定數據里的一個對象：

我們也可以在這里綁定返回對象的計算屬性。這是一個常用且強大的模式

new Vue({ el: '#app', data: { isActive: true, error: { value: true, type: 'fatal' } }, computed: { classObject: function () { return { base: true, active: this.isActive && !this.error.value, 'text-danger': this.error.value && this.error.type === 'fatal', } } } })

我們可以把一個數組傳給?v-bind:class

我們還可以使用三元表達式來切換列表中的 class ：

errorClass 是始終存在的，isActive 為 true 時添加 activeClass 類

我們可以在?v-bind:style?直接設置樣式：

也可以直接綁定到一個樣式對象，讓模板更清晰

v-bind:style 可以使用數組將多個樣式對象應用到一個元素上：

Vue.js 事件處理器

事件監聽可以使用 v-on 指令：

v-on 可以接收一個定義的方法來調用。我們需要使用一個方法來調用 javaScript 方法。

除了直接綁定到一個方法，也可以用內聯 javaScript 語句：

事件修飾符

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js 通過由點 . 表示的指令后綴來調用修飾符。

.stop - 阻止冒泡

.prevent - 阻止默認事件

.capture - 阻止捕獲

.self - 只監聽觸發該元素的事件

.once - 只觸發一次

.left - 左鍵事件

.right - 右鍵事件

.middle - 中間滾輪事件

Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

全部的按鍵別名：

.enter

.tab

.delete?(捕獲 "刪除" 和 "退格" 鍵)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

JavaScript Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。