v-model指令

原创于 2025-07-02 14:41:03 发布 · 634 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

Vue.js 专栏收录该内容

64 篇文章

订阅专栏

好的，接下来是 v-model 指令的示例。v-model 是 Vue 中最强大和最常用的指令之一，用于在表单输入元素或组件上创建双向数据绑定。

这意味着：

当你在输入框里输入内容时，数据会自动更新。
当你通过代码改变数据时，输入框里的内容也会自动更新。

`v-model` 指令（CDN 方式）

下面是一个完整的 HTML 文件，演示了 v-model 在多种不同类型的表单元素上的使用方法。

示例代码

您可以将此代码保存为 .html 文件，并在浏览器中打开来体验双向绑定的效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 v-model 示例 (CDN)</title>
    <style>
        body {
            font-family: system-ui, sans-serif;
            padding: 20px;
            font-size: 16px;
            background-color: #f9f9f9;
        }
        #app {
            max-width: 700px;
            margin: 0 auto;
            padding: 25px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }
        input[type="text"], textarea, select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .output {
            background-color: #eef2f7;
            padding: 15px;
            border-radius: 4px;
            border: 1px solid #dbe1e8;
            white-space: pre-wrap; /* 让换行符生效 */
            font-family: monospace;
        }
        .checkbox-group label, .radio-group label {
            font-weight: normal;
            margin-right: 15px;
        }
    </style>
</head>
<body>

<div id="app">
    <h1>v-model 综合示例</h1>

    <div class="form-group">
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model="name" placeholder="请输入你的名字">
    </div>

    <div class="form-group">
        <label for="bio">简介:</label>
        <textarea id="bio" v-model="bio" rows="4" placeholder="介绍一下自己"></textarea>
    </div>

    <div class="form-group checkbox-group">
        <label>
            <input type="checkbox" v-model="agreed"> 我已阅读并同意用户协议
        </label>
    </div>

    <div class="form-group checkbox-group">
        <label>兴趣爱好:</label>
        <label><input type="checkbox" value="coding" v-model="hobbies"> 编程</label>
        <label><input type="checkbox" value="music" v-model="hobbies"> 音乐</label>
        <label><input type="checkbox" value="sports" v-model="hobbies"> 运动</label>
    </div>

    <div class="form-group radio-group">
        <label>性别:</label>
        <label><input type="radio" value="male" v-model="gender"> 男</label>
        <label><input type="radio" value="female" v-model="gender"> 女</label>
        <label><input type="radio" value="secret" v-model="gender"> 保密</label>
    </div>

    <div class="form-group">
        <label for="city">城市:</label>
        <select id="city" v-model="city">
            <option disabled value="">请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
            <option>成都</option>
        </select>
    </div>

    <hr>
    <h2>实时数据预览</h2>
    <div class="output">
<pre>
{
  "姓名": "{{ name }}",
  "简介": "{{ bio }}",
  "是否同意": {{ agreed }},
  "兴趣爱好": {{ hobbies }},
  "性别": "{{ gender }}",
  "城市": "{{ city }}"
}
</pre>
    </div>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
    const { createApp, ref } = Vue;

    const app = createApp({
        setup() {
            // 为每个表单元素设置初始数据
            const name = ref('张三');
            const bio = ref('');
            const agreed = ref(false); // 单个复选框，布尔值
            const hobbies = ref(['coding']); // 多个复选框，绑定到一个数组
            const gender = ref('male'); // 单选按钮
            const city = ref('上海'); // 下拉选择框

            return {
                name,
                bio,
                agreed,
                hobbies,
                gender,
                city
            };
        }
    });

    app.mount('#app');
</script>

</body>
</html>

代码解释

数据初始化：
在 setup() 函数中，我们使用 ref() 为每一个将要被 v-model 绑定的表单元素创建了对应的响应式数据。注意它们的初始值和类型。
文本输入 (<input type="text"> 和 <textarea>)：
v-model="name" 将输入框的值与 name 这个 ref 变量绑定。任何一方的改变都会立刻同步到另一方。
单个复选框 (<input type="checkbox">)：
当只有一个复选框时，v-model 绑定一个布尔值 (agreed)。勾选时为 true，未勾选时为 false。
多个复选框：
当有多个复选框并希望将它们的选择项汇总时，v-model 需要绑定到一个数组 (hobbies)。勾选一个复选框，其 value 属性的值会被添加到数组中；取消勾选则会从数组中移除。
单选按钮 (<input type="radio">)：
对于单选按钮组，将它们所有按钮的 v-model 绑定到同一个变量 (gender)。当用户选择其中一个时，该按钮的 value 属性值就会赋给 gender。
下拉选择框 (<select>)：
v-model="city" 将 <select> 元素当前选中的 <option> 的值与 city 变量绑定。

`v-model` 的修饰符

v-model 还提供了一些方便的修饰符来处理常见情况：

.lazy: 默认情况下，v-model 在每次 input 事件后同步数据。添加 .lazy 修饰符后，会转为在 change 事件后同步（即输入框失去焦点时）。
- 示例: <input v-model.lazy="message">
.number: 自动将用户的输入值转为数值类型。如果无法被 parseFloat() 解析，则返回原始值。
- 示例: <input v-model.number="age" type="number">
.trim: 自动过滤用户输入的首尾空白字符。
- 示例: <input v-model.trim="username">