作用借助指令修饰符可以让指令的功能更强大。分类1.按键修饰符监测用户的案件配合键盘事件使用。2.事件修饰符简化程序对于阻止冒泡、阻止默认行文的操作。3.双向绑定指令的修饰符可以让v-model的功能更加强大。按键修饰符就是按键按下的时候的约束条件看代码template div !-- 按键修饰符 -- input typetext keydown.enteronKeyDown / /div /template script setup const onKeyDown () { console.log(onKeyDown); }; /script style scoped /style这个修饰符还有几个就比如说空格删除键等都可以加。事件修饰符事件修饰符主要用的有两个一个是prevent和stop。prevent主要的作用就是阻止默认行为就比如说a标签跳转指定的网站我们就可以加prevent阻止跳转。stop主要就是阻止冒泡那什么是冒泡就是子标签的父标签都有相同的事件就比如说点击事件当子标签触发点击事件的时候就会向上冒泡父标签也会出发点击事件这个时候就可以用stop来阻止冒泡。看代码template div !-- 按键修饰符 -- input typetext keydown.enteronKeyDown / !-- 事件修饰符 -- a hrefhttps://baidu.com click.prevent百度一下/a div classf1 div classf2 clickonClick p clickonClick211111/p /div /div /div /template script setup const onKeyDown () { console.log(onKeyDown); }; const onClick(){ console.log(1111); } const onClick2(){ console.log(2222) } /script style scoped /style上面是没有加stop会有冒泡template div !-- 按键修饰符 -- input typetext keydown.enteronKeyDown / !-- 事件修饰符 -- a hrefhttps://baidu.com click.prevent百度一下/a div classf1 div classf2 clickonClick p click.stoponClick211111/p /div /div /div /template script setup const onKeyDown () { console.log(onKeyDown); }; const onClick(){ console.log(1111); } const onClick2(){ console.log(2222) } /script style scoped /style上面代码就不会冒泡。双向绑定的修饰符v-model.trim数据 把输入框收尾的空格去掉再进行同步v-mode.number数据 尝试将输入框的数据转成数字v-model.lazy数据 当失去焦点的时候再同步数据。这几个用法就是在v-model后面点就可以了。具体代码就不写了。v-model指令作用在其他表单元素上。这里说的其他表单指的是文本域下拉菜单单选框复选框输入框。文本域这个和输入框用法一样就不介绍了。下拉菜单直接看代码template div select v-modelcity option valueBJ北京/option option valueSH上海/option option valueGZ广州/option /select /div /template script setup import {ref} from vue const cityref() /script style scoped /style结果如图可以看到选中北京会把value的值进行填充。单选框单选框没有value这个属性所以需要手动添加直接看代码template div input typeradio valuezhangsan v-modelname张三 input typeradio valuelisi v-modelname李四 input typeradio valuewangwu v-modelname王五 /div /template script setup import {ref} from vue const nameref() /script style scoped /style运行结果可以看到当选中李四之后value的值会被进行填充。复选框复选框有点麻烦它有两种情况1.只有一个复选框这时候v-model绑定布尔值关联的是复选框的check属性。2.如果有多个复选框这时候v-model就要和数组进行绑定但是复选框没有value属性所以需要手动添加。代码如下第一种情况template div input typecheckbox v-modelisAgree如果同意请勾选 /div /template script setup import {ref} from vue const isAgreeref(false) /script style scoped /style运行结果发现勾选之后布尔值变成了true第二种情况template div input typecheckbox valueLQ v-modelhobby篮球 input typecheckbox valueZQ v-modelhobby足球 input typecheckbox valueYMQ v-modelhobby羽毛球 input typecheckbox valuePPQ v-modelhobby乒乓球 /div /template script setup import{ref} from vue const hobbyref([]) /script style scoped /style运行结果