Vue3入门-指令补充

Yui_

发布于 2025-07-18 08:48:51

12100

代码可运行

文章被收录于专栏：Yui编程知识Yui编程知识

运行总次数：0

代码可运行

🏠个人主页：Yui_ 🍑操作环境：vscode\node.js 🚀所属专栏：Vue3

1. 指令修饰符

Vue 的指令修饰符（modifier）是以点（.）表示的特殊后缀，用于改变指令的行为。修饰符让指令更灵活，能满足更多实际开发需求。

1.1 按键修饰符

@keydown.enter当enter键按下时触发
@keyup.enter当enter键抬起时触发演示：

<template>
<div>
  <input type="text" @keydown.enter="fn">
</div>
</template>

<script setup>
    const fn = ()=>{
      console.log('enter键被按下~')
    }
</script>

<style scoped>

</style>

1.2 事件修饰符

@事件名.stop 阻止冒泡
@事件名.prevent 阻止默认行为
@事件名.stop.prevent既阻止冒泡又阻止默认行为

<template>
  <div @click="onDivClick">
    <a href="https://baidu.com" @click.prevent>百度一下</a>
    <p @click.stop="onPClick"></p>

    <a href="https://baidu.com" @click.stop.prevent>百度一下</a>
  </div>
</template>

<script setup>
const onPClick = () => {
  console.log('onPClick');
}

const onDivClick = () => {
  console.log('onDivClick');
}
</script>

<style>
div {
  width: 400px;
  height: 200px;
  background: plum;
}

div a {
  display: block;
  width: 100px;
  text-decoration: none;
  background: tomato;
  text-align: center;
  color: #fff;
}

div p {
  width: 200px;
  height: 100px;
  background: rebeccapurple;
}
</style>

1.3 v-model修饰符

v-model.trim 去除首尾空格
v-model.number 用parseFloat()转数字
v-model.lazy 失去焦点时同步数据，而不是输入时同步数据

<template>
<div>
  名称：<input type="text" v-model.lazy="goods.name"> <br><br>
  价格：<input type="text" v-model.trim="goods.price"> <br> <br>
  数量：<input type="text" v-model.number="goods.count"> <br> <br>
</div>
</template>

<script setup>
    import {reactive} from 'vue'
    const goods = reactive({
      name:'',
      price:'',
      count:''
    })
</script>

<style scoped>

</style>

2. v-model用在其他表单元素上

常见的表单元素都是可以用v-model绑定关联，作用是可以快速获取或者设置表单元素的值它会根据控件自动选取正确的属性来更新元素。

输入框 input:text ——> value
文本域 textarea ——> value
下拉菜单 select ——> value
单选框 input:radio ——> value
复选框 input:checkbox ——> checked / value

演示：

<template>
  <div>
    <!-- ⽂本域 -->
    <textarea v-model="intro" cols="30" rows="4" placeholder="请输⼊⾃我介绍"></textarea>
    <br />
    <br />
    <!-- 下菜菜单 -->
    <select v-model="city">
      <option value="BJ">北京</option>
      <option value="SH">上海</option>
      <option value="SZ">深圳</option>
      <option value="HZ">杭州</option>
    </select>
    <br />
    <br />
    <!-- 单选框：多个当中只能选择⼀个，需要给单选框⼿动添加 value 属性 -->
    <input type="radio" value="a" v-model="blood" />A
    <input type="radio" value="b" v-model="blood" />B
    <input type="radio" value="ab" v-model="blood" />AB
    <input type="radio" value="o" v-model="blood" />O
    <br />
    <br />
    <input type="checkbox" v-model="isAgree" />是否同意⽤⼾协议
    <br />
    <br />
    <input v-model="hobby" type="checkbox" value="LQ" />篮球
    <input v-model="hobby" type="checkbox" value="ZQ" />⾜球
    <input v-model="hobby" type="checkbox" value="YMQ" />⽻⽑球
    <input v-model="hobby" type="checkbox" value="PPQ" />乒乓球
    <br />
    <input v-model="hobby" type="checkbox" value="PB" />跑步
    <input v-model="hobby" type="checkbox" value="YY" />游戏
    <input v-model="hobby" type="checkbox" value="PLT" />普拉提
    <input v-model="hobby" type="checkbox" value="LDW" />拉丁舞
  </div>
</template>

<script setup>
import { ref } from 'vue'

//自我介绍
const intro = ref('')

//收集城市
const city = ref('')

//血型
const blood = ref('')

//是否同意用户协议
const isAgree = ref(false)

//爱好
const hobby = ref(['a'])
</script>

<style scoped></style>

结论：

对于下拉表的值，v-model写在select上，关联选中option的value
对于当选框的值，v-model收集单选框的value
对于复选框，一个复选框，v-model绑定布尔值，关联checked属性，一组复选框，v-model绑定数组，关联value属性，给复选框手动天津value

3. 样式绑定

在 Vue 中，样式绑定常用 v-bind:class 和 v-bind:style（或它们的简写 :class、:style）来实现动态样式。

3.1 操作class

语法：

:class = "三元表达式/对象"

三元表达式

<p :class="条件?'类名1':'类名2'"></p>

对象语法当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值为true，就添加这个类，否则就删除这个类。

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

注意：静态class可以于动态class共存

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

演示：

<script setup>
import { ref } from 'vue'
// 是否处于激活
const isActive = ref(true)
</script>
<template>
  <div>
    <!-- 1. 三元绑定 -->
    <p :class="isActive ? 'active' : ''">Active1</p>
    <!-- 2. 对象绑定 -->
    <p :class="{ active: isActive }">Active2</p>
    <!-- 3. 静态class与动态class共存 -->
    <p class="item" :class="{ active: isActive }">Active3</p>
  </div>
</template>
<style>
.active {
  color: red;
}
</style>

4. 操作style

语法

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

演示

<script setup>
import { reactive } from 'vue'
// ⾏内样式对象
const styleObj = reactive({
  color: '#fff',
  backgroundColor: 'purple'
})
</script>
<template>
  <div>
    <p :style="styleObj">hahahahha</p>
  </div>
</template>
<style></style>