【卷起来】VUE3.0教程-04-表单输入绑定

Hello，各位老铁，今天我们继续给大家讲解VUE3.0教程，本期我们讲述一下VUE中的表单输入绑定，在实际开发过程中，表单的输入是我们常见的功能，那么我们接下来看看，VUE是如何处理的。

=========各位看官，在开始学习之前，请帮我点个关注和赞吧==========

表单输入绑定

🌲 概述

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：


<template><h2>{{ text }}</h2><input:value="text"@input="event => text = event.target.value"></template><script setup>import {ref} from 'vue'const text = ref("哈哈")</script>

v-model 指令帮我们简化了这一步骤：

<template><h2>{{ text }}</h2><input v-model="text"></template><script setup>import {ref} from 'vue'const text = ref("哈哈")</script>

另外，v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
<input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
<select> 会绑定 value property 并侦听 change 事件。

🌲 基本用法

🌾 文本


<template><p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />
</template><script setup>import {ref} from 'vue'const message = ref("")</script>

🌾 多行文本


<template><span>Multiline message is:</span><p style="white-space: pre-line;">{{ message }}</p><textarea v-model="message" placeholder="add multiple lines"></textarea>
</template><script setup>import {ref} from 'vue'const message = ref("")</script>

注意在 <textarea> 中是不支持插值表达式的。请使用 v-model 来替代：

<!-- 错误 -->
<textarea>{{ text }}</textarea><!-- 正确 -->
<textarea v-model="text"></textarea>

🌾 复选框

单一的复选框，绑定布尔类型值：


<template><input type="checkbox" id="checkbox" v-model="checked" /><label for="checkbox">{{ checked }}</label>
</template><script setup>import {ref} from 'vue'const checked = true</script>

我们也可以将多个复选框绑定到同一个数组或集合的值：


<template><div>你选择的老婆是: {{ checkedNames }}</div><input type="checkbox" id="zly" value="赵丽颖" v-model="checkedNames"><label for="zly">赵丽颖</label><input type="checkbox" id="cls" value="苍老师" v-model="checkedNames"><label for="cls">苍老师</label><input type="checkbox" id="bd" value="波多老师" v-model="checkedNames"><label for="bd">波多老师</label>
</template><script setup>import {ref} from 'vue'const checkedNames = ref([]);</script>

在这个例子中，checkedNames 数组将始终包含所有当前被选中的框的值。

🌾单选框按钮


<template><div>Picked: {{ picked }}</div><input type="radio" id="one" value="love" v-model="picked" /><label for="one">喜欢我</label><input type="radio" id="two" value="do not love" v-model="picked" /><label for="two">不喜欢我</label>
</template>
<script setup>import {ref} from 'vue'const picked = ref("");</script>

🌾 选择器

单个选择器的示例如下：

<template><div>当前选择: {{ selected }}</div><select v-model="selected"><option disabled value="">Please select one</option><option>铁甲小宝</option><option>数码宝贝</option><option>葫芦娃</option></select>
</template>
<script setup>import {ref} from 'vue'const selected = ref("");</script>

多选 (值绑定到一个数组)：


<template><div>当前选择: {{ selected }}</div><select v-model="selected" multiple><option>铁甲小宝</option><option>数码宝贝</option><option>葫芦娃</option></select>
</template>
<script setup>import {ref} from 'vue'const selected = ref([]);</script>

注意：多选需要按住ctr键去选择

选择器的选项可以使用 v-for 动态渲染：


<template><div>当前选择: {{ selected }}</div><select v-model="selected"><option v-for="option in options" :value="option.value">{{ option.text }}</option></select>
</template>
<script setup>import {ref} from 'vue'const selected = ref('绝对计划')const options = ref([{ text: '小李飞刀', value: '小李飞刀' },{ text: '天下第一', value: '天下第一' },{ text: '绝对计划', value: '绝对计划' }])</script>

🌲 值绑定

对于单选按钮，复选框和选择器选项，v-model 绑定的值通常是静态的字符串 (或者对复选框是布尔值)：

<!-- `picked` 在被选择时是字符串 "a" -->
<input type="radio" v-model="picked" value="a" /><!-- `toggle` 只会为 true 或 false -->
<input type="checkbox" v-model="toggle" /><!-- `selected` 在第一项被选中时为字符串 "abc" -->
<select v-model="selected"><option value="abc">ABC</option>
</select>

但有时我们可能希望将该值绑定到当前组件实例上的是动态数据。这可以通过使用 v-bind 来实现。此外，使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型。

🌾 复选框


<template><div>当前：toggle的值：{{ toggle }}</div><inputtype="checkbox"v-model="toggle"true-value="yes"false-value="no" />
</template>
<script setup>import {ref} from 'vue'const toggle = ref("")</script>

true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值：


<template><div>当前：toggle的值：{{ toggle }}</div><inputtype="checkbox"v-model="toggle"true-value="yes"false-value="no" /><hr><inputtype="checkbox"v-model="toggle":true-value="dynamicTrueValue":false-value="dynamicFalseValue" />
</template>
<script setup>import {ref} from 'vue'const toggle = ref("")const dynamicTrueValue = "兄弟，选我就对了"const dynamicFalseValue = "兄弟，没选我，你是瞎了？"</script>

🌾 单选按钮


<template><div>当前选择的值：{{ pick }}</div><input type="radio" v-model="pick" :value="first" /> 赵云 &nbsp;&nbsp;&nbsp;<input type="radio" v-model="pick" :value="second" />姜维</template>
<script setup>import {ref} from 'vue'const pick = ref("")const first = "吾乃常山赵子龙！"const second = "老将军，可曾听说过天水姜伯约？"</script>

pick 会在第一个按钮选中时被设为 first，在第二个按钮选中时被设为 second。

🌾 选择器选项

<template><div>当前选择的值：{{ selected}}</div><select v-model="selected"><!-- 内联对象字面量 --><option :value="{ number: 123 }">123</option>
</select></template>
<script setup>import {ref} from 'vue'const selected = ref("")</script>

v-model 同样也支持非字符串类型的值绑定！在上面这个例子中，当某个选项被选中，selected 会被设为该对象字面量值 { number: 123 }。

🌲 修饰符

🌾 .lazy

默认情况下，v-model 会在每次 input 事件后更新数据。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：


<template><div>当前选择的值：{{ msg}}</div><input v-model.lazy="msg" /></template>
<script setup>import {ref} from 'vue'const msg = ref("")</script>

在没有添加.lazy时，每次输入内容，数据会直接发生变化，而加了.lazy之后，输入内容后敲击回车数据才会更新。

🌾 .number

如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：


<template><div>当前选择的值：{{ age}}</div><input v-model.number="age" type="number"/></template>
<script setup>import {ref} from 'vue'const age = ref(0)</script>