vue学习day03-指令修饰符、v-bind对于样式控制的增强、v-model应用于其他表单元素

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）示例：

代码：

结果：