【Vue】指令补充+样式绑定+计算属性+侦听器

news2025/6/9 0:17:23

【指令补充】

【指令修饰符】

指令修饰符可以让指令的功能更强大，书写更便捷

分类：

1.按键修饰符（侦测当前点击的是哪个按键）

2.事件修饰符（简化程序对于阻止冒泡，一些标签的默认默认行为的操作）

3.双向绑定指令修饰符（让v-model的功能更强大）

【按键修饰符】

• @keydown.enter：当enter键按下时触发

• @keyup.enter：当enter键抬起时触发

【事件修饰符】

1. @事件名.stop —> 阻止冒泡

2. @事件名.prevent —>阻止默认行为

3. @事件名.stop.prevent —>可以连用，即阻止事件冒泡也阻止默认行为

【v-model修饰符】

• v-model.trim —> 去除输入框的首尾空格后，再同步给数据

• v-model.number —> 尝试用parseFloat()把输入框的值转成数字后，同步给数据，转不了就不转

• v-model.lazy —> 失去焦点时同步数据，而不是输入时同步数据

【双向绑定指令修饰符】

输⼊框 input:text ——> value

文本域 textarea ——> value

下拉菜单 select ——> value

单选框 input:radio ——> value

复选框 input:checkbox ——> checked / value

<script setup>
import { ref } from 'vue'
// ⾃我介绍
const intro = ref('')
// 收集城市
const city = ref('SH')
// 收集血型
const blood = ref('ab')
// 是否同意用户协议
const isAgree = ref(false)
// 收集爱好
const hobby = ref(['ZQ', 'PB'])
</script>
<template>
    <div>
        <!-- 文本域 -->
        <textarea v-model="intro" cols="30" rows="4"
            placeholder="请输⼊自我介绍"></textarea>
        <br />
        <br />
        <!-- 下拉菜单 -->
         <!-- 哪个option的value放到city的ref中， 哪个就是初始值（默认选项） -->
        <select v-model="city">
            <option value="BJ">北京</option>
            <option value="SH">上海</option>
            <option value="SZ">深圳</option>
            <option value="HZ">杭州</option>
        </select>
        <br />
        <br />
        <!-- 单选框：多个当中只能选择⼀个 ，v-model需要找value， 需要给单选框手动添加 value 属性 -->
         <!-- 由于input没有紧密联系的父标签， 所以需要每个标签都加上v-model -->
        <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 />
        <!-- 复选框， 如果只有一个复选框， v-model绑定布尔值， 关联复选框的checked属性 -->
        <!-- 如果有多个， v-model绑定数组， 关联复选框的value属性 ，需要手动添加 value 属性 -->
        <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>
<style scoped></style>