当前位置：首页 > article >正文

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

article 2025/8/11 7:06:07

【指令补充】

【指令修饰符】

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

分类：

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>