Vue指令修饰符

作用：借助指令修饰符，可以让指令的功能更强大。

分类：

1.按键修饰符：监测用户的案件，配合键盘事件使用。

2.事件修饰符：简化程序对于阻止冒泡、阻止默认行文的操作。

3.双向绑定指令的修饰符：可以让v-model的功能更加强大。

按键修饰符

就是按键按下的时候的约束条件，看代码：

javascript 复制代码

<template>
  <div>
    <!-- 按键修饰符 -->
    <input type="text" @keydown.enter="onKeyDown" />

  </div>
</template>

<script setup>
const onKeyDown = () => {
  console.log("onKeyDown");
};
</script>

<style scoped>
</style>

这个修饰符还有几个，就比如说，空格，删除键等，都可以加。

事件修饰符：

事件修饰符主要用的有两个，一个是prevent和stop。

prevent主要的作用就是阻止默认行为，就比如说a标签跳转指定的网站，我们就可以加prevent，阻止跳转。stop主要就是阻止冒泡，那什么是冒泡，就是子标签的父标签，都有相同的事件，就比如说点击事件，当子标签触发点击事件的时候，就会向上冒泡，父标签也会出发点击事件，这个时候就可以用stop来阻止冒泡。看代码：

javascript 复制代码

<template>
  <div>
    <!-- 按键修饰符 -->
    <input type="text" @keydown.enter="onKeyDown" />
    <!-- 事件修饰符 -->
    <a href="https://baidu.com" @click.prevent>百度一下</a>
    <div class="f1">
      <div class="f2" @click="onClick">
        <p @click="onClick2">11111</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，会有冒泡

javascript 复制代码

<template>
  <div>
    <!-- 按键修饰符 -->
    <input type="text" @keydown.enter="onKeyDown" />
    <!-- 事件修饰符 -->
    <a href="https://baidu.com" @click.prevent>百度一下</a>
    <div class="f1">
      <div class="f2" @click="onClick">
        <p @click.stop="onClick2">11111</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指令作用在其他表单元素上。

这里说的其他表单指的是：文本域，下拉菜单，单选框，复选框，输入框。

文本域：

这个和输入框用法一样就不介绍了。

下拉菜单：

直接看代码

javascript 复制代码

<template>
<div>

  <select v-model="city">
    <option value="BJ">北京</option>
    <option value="SH">上海</option>
    <option value="GZ">广州</option>
  </select>
  
</div>
</template>

<script setup>
import {ref} from 'vue'
  const city=ref("")
</script>

<style scoped>

</style>

结果如图

可以看到，选中北京，会把value的值进行填充。

单选框

单选框没有value这个属性，所以需要手动添加直接看代码

javascript 复制代码

<template>
<div>
  <input type="radio" value="zhangsan" v-model="name">张三
  <input type="radio" value="lisi" v-model="name">李四
  <input type="radio" value="wangwu" v-model="name">王五
</div>
</template>

<script setup>
import {ref} from 'vue'
const name=ref()
  
</script>

<style scoped>

</style>

运行结果

可以看到当选中李四之后，value的值会被进行填充。

复选框

复选框有点麻烦，它有两种情况：

1.只有一个复选框：这时候v-model绑定布尔值，关联的是复选框的check属性。

2.如果有多个复选框，这时候v-model就要和数组进行绑定，但是复选框，没有value属性，所以需要手动添加。

代码如下：

第一种情况：

javascript 复制代码

<template>
<div>

  <input type="checkbox" v-model="isAgree">如果同意请勾选
</div>
</template>

<script setup>
import {ref} from 'vue'
  const isAgree=ref(false)
</script>

<style scoped>

</style>

运行结果

发现勾选之后，布尔值变成了true；

第二种情况：

javascript 复制代码

<template>
<div>
  <input type="checkbox" value="LQ" v-model="hobby">篮球
    <input type="checkbox" value="ZQ" v-model="hobby">足球
  <input type="checkbox" value="YMQ" v-model="hobby">羽毛球
  <input type="checkbox" value="PPQ" v-model="hobby">乒乓球

</div>
</template>

<script setup>
import{ref} from 'vue'
  const hobby=ref([])
</script>

<style scoped>

</style>

运行结果