【Vue2】指令修饰符和 v-bind 控制样式

指令修饰符

1.什么是指令修饰符？

通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

2.按键修饰符

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

3.v-model修饰符

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

4.事件修饰符

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

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

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

1.语法：

<div> :class = "对象/数组">这是一个div</div>

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

2.对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

​ 适用场景：一个类名，来回切换

3.数组语法

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

使用场景:批量添加或删除类