正心全栈编程-文档站

Appearance

表单数据绑定 ​

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

vue
<input :value="text" @input="(event) => (text = event.target.value)" />

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

vue
<input v-model="text" />

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

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

注意

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用响应式系统的 API来声明该初始值。

基本用法 ​

文本 ​

vue
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

注意

对于需要使用 IME 的语言 (中文，日文和韩文等)，你会发现 v-model 不会在 IME 输入还在拼字阶段时触发更新。如果你的确想在拼字阶段也触发更新，请直接使用自己的 input 事件监听器和 value 绑定而不要使用 v-model。

多行文本 ​

vue
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

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

vue
<!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

复选框 ​

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

vue
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

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

js
const checkedNames = ref([]);
vue
<div>Checked names: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />

单选按钮 ​

vue
<div>Picked: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

选择器 ​

单个选择器的示例如下：

vue
<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

注意

如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。

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

js
<div>Selected: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

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

js
const selected = ref("A");

const options = ref([
  { text: "One", value: "A" },
  { text: "Two", value: "B" },
  { text: "Three", value: "C" },
]);
vue
<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>Selected: {{ selected }}</div>

值绑定 ​

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

vue
<!-- `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 还使我们可以将选项值绑定为非字符串的数据类型。

复选框 ​

vue
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />

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

vue
<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue"
/>

提示

true-value 和 false-value attributes 不会影响 value attribute，因为浏览器在表单提交时，并不会包含未选择的复选框。为了保证这两个值 (例如：“yes”和“no”) 的其中之一被表单提交，请使用单选按钮作为替代。

单选按钮 ​

vue
<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

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

选择器选项 ​

vue
<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>

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

修饰符 ​

.lazy ​

默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：

vue
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

.number ​

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

vue
<input v-model.number="age" />

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

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

.trim ​

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

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

案例 ​

v-model 数据绑定 ​

目标：把 value 属性和 vue 数据变量，双向绑定到一起

  • 语法：v-model="vue 数据变量"
  • 双向数据绑定
    • 数据变化 -> 视图自动同步
    • 视图变化 -> 数据自动同步
  • 演示：用户名绑定 - vue 内部是 MVVM 设计模式
vue
<script setup>
import { reactive } from "vue";

const user = reactive({
  username: "",
  pass: "",
  city: "",
  hobby: [],
  gender: "",
  intro: "",
});
// 总结：
// 特别注意：v-model, 在 input[checkbox] 的多选框状态
// 变量为非数组，则绑定的是 checked 的属性 (true/false) - 常用于：单个绑定使用
// 变量为数组，则绑定的是他们的 value 属性里的值 - 常用于：收集勾选了哪些值
const submit = () => {
  console.log(user);
};
</script>

<vue>
  <div>
    <!--
    	v-model:是实现 vue js 变量和表单标签 value 属性，双向绑定的指令
    -->
    <div>
      <span>用户名：</span>
      <input type="text" v-model="user.username"/>
    </div>
    <div>
      <span>密码：</span>
      <input type="password" v-model="user.pass"/>
    </div>
    <div>
      <span>来自于：</span>
      <!-- 下拉菜单要绑定在 select 上 -->
      <select v-model="user.city">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
    <div>
      <!-- (重要)
      遇到复选框，v-model 的变量值
      非数组 - 关联的是复选框的 checked 属性
      数组   - 关联的是复选框的 value 属性
       -->
      <span>爱好：</span>
      <input type="checkbox" v-model="user.hobby" value="抽烟">抽烟
      <input type="checkbox" v-model="user.hobby" value="喝酒">喝酒
      <input type="checkbox" v-model="user.hobby" value="写代码">写代码
    </div>
    <div>
      <span>性别：</span>
      <input type="radio" value="男" name="sex" v-model="user.gender">男
      <input type="radio" value="女" name="sex" v-model="user.gender">女
    </div>
    <div>
      <span>自我介绍</span>
      <textarea v-model="user.intro"></textarea>
    </div>
    <div>
      <button @click="submit">提交</button>
    </div>
  </div>
</vue>

<style scoped></style>

总结：本阶段 v-model 只能用在表单元素上，以后学组件后讲 v-model 高级用法

v-model 修饰符 ​

目标：让 v-model 拥有更强大的功能

  • 语法：
    • v-model.修饰符="vue 数据变量"
      • .number 以 parseFloat 转成数字类型
      • .trim 去除首尾空白字符
      • .lazy 在 change 时触发而非 inupt 时
vue
<script setup>
import { reactive } from "vue";

const user = reactive({
  age: "",
  motto: "",
  intro: "",
});

const submit = () => {
  console.log(user);
};
</script>

<vue>
  <div>
    <div>
      <span>年龄：</span>
      <!-- .number 修饰符 - 把值 parseFloat 转数值再赋予给 v-model 对应的变量 -->
      <input type="text" v-model.number="user.age">
    </div>
    <div>
      <span>人生格言：</span>
      <!-- .trim 修饰 - 去除首尾两边空格 -->
      <input type="text" v-model.trim="user.motto">
    </div>
    <div>
      <span>自我介绍：</span>
      <!-- .lazy 修饰符 - 失去焦点内容改变时 (onchange 事件), 把内容同步给 v-model 的变量 -->
      <textarea v-model.lazy="user.intro"></textarea>
    </div>
    <div>
      <button @click="submit">提交</button>
    </div>
  </div>
</vue>

<style scoped></style>

总结：v-model 修饰符，可以对值进行预处理，非常高效好用