Vue視圖下

3 Vue視圖

3.5 樣式綁定

class綁定

<p :class='對象'> <p :class="數組"> <p :class="{類名:true/false, 類名:true/false}"> 

style綁定

<p :style="{color:'值', background:'值'}"> <p :style="[{}, {}, {}]"> 

3.6 事件

事件綁定

<p @事件名="方法"> <p v-on:事件名="方法"> 方法加 () 的問題 <p @事件名="方法(1,1,2,3,$event)"> 

事件修飾符

.stop 阻止事件冒泡 .prevent 阻止默認動做 .capture 捕獲階段觸發事件 .once 只綁定一次 .self 只有自己才觸發 .passive 優化移動端的scroll事件 <p @click.stop=""> <p @click.stop.prevent=""> 

鍵盤修飾符

全部按鍵 .數字 (ascii ) 特殊按鍵 .enter .space .tab .up .left .right .down .delete 系統按鍵修飾符 .ctrl .alt .shift .meta <input @keyup.ctrl.enter> 按住ctrl再按回車 

3.7表單

文本 input:text textarea v-model checkbox 單個 true-value false-value true/false checkbox 多個 數組 單選按鈕 input:redio v-model value值 select選擇框 option的value值 多選 multiple, 數組 與對象中的屬性雙向連接 <input v-model="formData.username"> <input v-model="formData.pwd"> 表單修飾符 v-model.trim v-model.number 把值轉爲 number 類型 v-model.lazy