【卷起来】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>
  <input
    type="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>
  <input
    type="checkbox"
    v-model="toggle"
    true-value="yes"
    false-value="no" />
  <hr>
  <input
    type="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>

如果该值无法被 parseFloat() 处理，那么将返回原始值。

number 修饰符会在输入框有 type="number" 时自动启用。

🌾 .trim

如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：

<input v-model.trim="msg" />

 

----------------------------------------------------------------------

​分享不易，耗时耗力，喜欢的同学给个关注和赞吧

承接毕设指导，技术答疑，学习路上想要找私人教练的同学可以私信我

更多学习资料，公众号：墨轩学习网，B站：墨轩大楼

----------------------------------------------------------------------

另有下图需求的也记得私信我哟，专业班子