7、指令修飾符

（1）概念：

通過“.”指明一些指令后綴，不同后綴封裝了不同的處理操作->簡化代碼

（2）按鍵修飾符

@keyup.enter->鍵盤回車監聽

（3）v-model修飾符

v-model.trim??? -> 去除首尾空格

v-model.number??? ->轉數字

（4）事件修飾符

@事件名.stop?????? -> ??阻止冒泡

@事件名.prevent???? ->?? 阻止默認行為

（5）示例

1）@keyup.enter

代碼：

結果：

2）v-model修飾符

①v-model.trim??? -> 去除首尾空格

代碼：

結果：

②v-model.number??? ->轉數字

代碼：

結果：

?

3）事件修飾符

①@事件名.stop?????? -> ??阻止冒泡

代碼：

結果：

②@事件名.prevent???? ->?? 阻止默認行為

代碼：

結果：

--------------------------------------------------------------

8、v-bind對于樣式控制的增強

（1）v-bind對于樣式控制的增強-操作calss

1）語法： ???：class=“對象/數組”

①對象->鍵就是類名，值是布爾值。值為true有這個類；false，沒有這個類

適用于：一個類名，來回切換

②數組->數組中的所有類，都會加到盒子上，本質就是一個class列表

適用于：批量添加或刪除類

（類名需要用引號引起來）

2）示例

①

代碼 ：

結果：

②代碼：

結果：

（2）v-bind對于樣式控制的增強-操作style

1）語法：????? :style=“樣式對象”

2）案例

代碼：

結果：

9、v-model應用于其他表單元素

常見的表單元素都可以與v-model綁定關聯->快速獲取或設置表單元素的值

它可以根據控件類型自動選取正確的方法來更新元素

（1）輸入框input：text?????? ?->value

（2）文本域textarea???????? ?->value

（3）復選框input：checkbox ?->checked

（4）單選框input：radio??? ??-> checked

（5）下拉菜單select??? ??????->value

（6）示例：

代碼：

結果：