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)示例:
代码:
结果: