[04] Vue指令(3)

指令修饰符

• 指令修饰符就是通过.指明一些指令后缀不同的后缀封装了不同的处理操作来简化代码

按键修饰符

• @keyup.enter —> 点击enter键的时候触发

v-model修饰符

• v-model.trim —> 去除首位空格
• v-model.number —> 转数字

事件修饰符

• @事件名.stop —> 阻止冒泡
• @事件名.prevent —> 阻止默认行为
• @事件名.stop.prevent —> 可以连用即阻止事件冒泡也阻止默认行为

v-bind对样式控制的增强——操作class

为了方便开发者进行样式控制，Vue 扩展了 v-bind 的语法，可以针对class 类名和style 行内样式进行控制 。

1. 语法：<div> :class = "对象/数组">这是一个div</div>

2. 对象语法：当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类。
   <div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
   场景：一个类名，来回切换

3. 数组语法：当class动态绑定的是数组时，数组中所有的类，都会添加到盒子上，本质就是一个 class 列表。
   <div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
   场景:批量添加或删除类

v-model在其他表单元素的使用

• 常见的表单元素都可以用 v-model 绑定关联来快速获取或设置表单元素的值。它会根据控件类型自动选取正确的方法来更新元素。

  • 输入框 input:text ——> value
  • 文本域 textarea ——> value
  • 复选框 input:checkbox ——> checked
  • 单选框 input:radio ——> checked
  • 下拉菜单 select ——> value
    …