Vue表单元素绑定：v-model 指令

pan_junbiao

已于 2024-08-23 15:47:11 修改

阅读量711

点赞数 6

分类专栏： Vue 我の原创文章标签： vue.js 前端 javascript

于 2024-08-23 14:24:38 首次发布

本文链接：https://blog.csdn.net/pan_junbiao/article/details/141464168

版权

我の原创同时被 2 个专栏收录

524 篇文章 28 订阅

订阅专栏

Vue

37 篇文章 0 订阅

订阅专栏

Vue 指令系列文章：

《Vue插值：双大括号标签、v-text、v-html、v-bind 指令》

《Vue指令：v-cloak、v-once、v-pre 指令》

《Vue条件判断：v-if、v-else、v-else-if、v-show 指令》

《Vue循环遍历：v-for 指令》

《Vue事件处理：v-on 指令》

《Vue表单元素绑定：v-model 指令》

1、v-model 指令

在 Web 应用中，通过表单可以实现输入文本、选择选项和提交数据等功能。在 Vue.js 中，通过 v-model 指令可以对象表单元素进行双向数据绑定，在修改表单值的同时，Vue 实例中对应的属性值也会随之更新，反之亦然。

1.1 文本框的绑定

v-model 指令会根据控件类型自动选取正确的方法来更新元素。在表单中，最基本的表单控件类型是文本框。应用 v-model 指令将文本框和定义的数据进行绑定。

<!-- 绑定：文本框 -->
<input type="text" v-model="userModel.userName"/>

1.2 单选按钮的绑定

单选按钮和定义的数据进行绑定，当某个单选按钮选中是，v-model 指令绑定的属性值会被赋值为该单选按钮的 value 属性值。

<!-- 绑定：单选按钮 -->
<input id="male" type="radio" value="1" v-model="userModel.sex" />
<label for="male">男</label>

<input id="female" type="radio" value="2" v-model="userModel.sex" />
<label for="female">女</label>

<input id="secrecy" type="radio" value="3" v-model="userModel.sex" />
<label for="secrecy">保密</label>

1.3 下拉列表框的绑定

在只提供单选的下拉列表框中，当选择某个选项时，如果为该选项设置了 value 值，则 v-model 绑定的属性值会被赋值为显示在该选项中的文本。

<!-- 绑定：下拉列表框 -->
<select name="departmentCode" v-model="userModel.departmentCode">
    <option value="">请选择</option>
    <option value="1001">研发部</option>
    <option value="1002">财务部</option>
    <option value="1003">人事部</option>
</select>

1.4 复选框的绑定

复选框和定义的数据进行绑定，数据类型为数组。v-model 指令会自动根据数组里的值与复选框进行绑定。

<!-- 绑定：复选框 -->
<input type="checkbox" id="2001" value="2001" v-model="userModel.roleCode">
<label for="2001">系统管理员 </label>

<input type="checkbox" id="2002" value="2002" v-model="userModel.roleCode">
<label for="2002">人事管理员 </label>

<input type="checkbox" id="2003" value="2003" v-model="userModel.roleCode">
<label for="2003">财务管理员 </label></td>

1.5 综合实例

【实例】使用 v-model 指令，绑定表单元素：文本框、单选按钮、下拉列表框、复选框。执行结果如下图：

创建 index.html 文件，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="pan_junbiao的博客">
    <title>v-model指令</title>

    <!-- 设置CSS样式 -->
    <style type="text/css">
        table {
            /*设置单元格的边框合并为1*/
            border-collapse: collapse;

        }

        th {
            text-align: right;
        }

        th,
        td {
            border: 1px solid #000000;
            padding: 5px 10px;
        }

        .b_text {
            width: 300px;
            padding: 3px;
            font-size: 16px;
        }

        select {
            width: 100px;
            padding: 3px;
        }
    </style>
</head>

<body>
    <div id="app">
        <form action="" method="post" name="myForm">
            <table align="center">
                <caption>用户信息</caption>
                <!-- 绑定：文本框 -->
                <tr>
                    <th>用户姓名：</th>
                    <td>
                        <input type="text" v-model="userModel.userName" class="b_text" />
                    </td>
                </tr>
                <tr>
                    <th>博客地址：</th>
                    <td>
                        <input type="text" v-model="userModel.blogUrl" class="b_text" />
                    </td>
                </tr>
                <!-- 绑定：单选按钮 -->
                <tr>
                    <th>性别：</th>
                    <td>
                        <input id="male" type="radio" value="1" v-model="userModel.sex" />
                        <label for="male">男</label>
                        <input id="female" type="radio" value="2" v-model="userModel.sex" />
                        <label for="female">女</label>
                        <input id="secrecy" type="radio" value="3" v-model="userModel.sex" />
                        <label for="secrecy">保密</label>
                    </td>
                </tr>
                <!-- 绑定：下拉列表框 -->
                <tr>
                    <th>部门：</th>
                    <td>
                        <select name="departmentCode" v-model="userModel.departmentCode">
                            <option value="">请选择</option>
                            <option v-for="(item, index) in departmentList" :key="index" :value="item.departmentCode">{{
                                item.departmentName }}</option>
                        </select>
                    </td>
                </tr>
                <!-- 绑定：复选框 -->
                <tr>
                    <th>角色：</th>
                    <td>
                        <template v-for="(role, index) in roleList" :key="index">
                            <input type="checkbox" :id="role.roleCode" :value="role.roleCode"
                                v-model="userModel.roleCode" />
                            <label :for="role.roleCode">{{ role.roleName + " " }}</label>
                        </template>
                    </td>
                </tr>
                <tr>
                    <th>博客信息：</th>
                    <td>
                        <input type="text" v-model="userModel.blogName" class="b_text" />
                    </td>
                </tr>
                <!-- 以下是提交、取消按钮 -->
                <tr>
                    <td colspan="2" style="text-align: center; padding: 5px;">
                        <input type="submit" value="提交" style="margin-right: 10px;" />
                        <input type="reset" value="重置" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    // 使用 Vue.createApp 函数创建一个应用程序实例
    const vueApp = Vue.createApp({
        //数据
        data() {
            return {
                userModel: {},        //用户对象
                departmentList: [],  //部门列表
                roleList: []         //角色列表  
            }
        },
        //初始化入口
        created() {
            this.getUserInfo();        //获取用户信息
            this.getDepartmentList();  //获取部门列表
            this.getRoleList();        //获取角色列表
        },
        //方法
        methods: {
            //获取用户信息
            getUserInfo: function () {
                this.userModel = {
                    userName: "pan_junbiao的博客",
                    blogName: "您好，欢迎访问 pan_junbiao的博客",
                    blogUrl: "https://blog.csdn.net/pan_junbiao",
                    sex: 1,
                    departmentCode: "1001",
                    roleCode: ["2001", "2003"]
                }
            },
            //获取部门列表
            getDepartmentList: function () {
                this.departmentList = [
                    { departmentCode: "1001", departmentName: "研发部" },
                    { departmentCode: "1002", departmentName: "财务部" },
                    { departmentCode: "1003", departmentName: "人事部" }
                ]
            },
            //获取角色列表
            getRoleList: function () {
                this.roleList = [
                    { roleCode: "2001", roleName: "系统管理员" },
                    { roleCode: "2002", roleName: "人事管理员" },
                    { roleCode: "2003", roleName: "财务管理员" }
                ]
            }
        }
        //使用 mount() 方法，装载应用程序实例的根组件
    }).mount('#app'); 
</script>

</html>

2、修饰符的使用

Vue.js 为 v-model 指令提供了一些修饰符，通过这些修饰符可以处理某些常规操作。这些修饰符的说明如下：

2.1 lazy

默认情况下，应用 v-model 指令将文本框的值与数据进行同步时使用的是 input 事件。如果添加了 lazy 修饰符，就可以转变为使用 change 事件进行同步。示例代码如下：

<body>
    <div id="app">
        <input v-model.lazy="message" class="b_text" placeholder="请输入内容">
        <p>{{message}}</p>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    // 使用 Vue.createApp 函数创建一个应用程序实例
    const vueApp = Vue.createApp({
        //数据
        data() {
            return {
                message:""
            }
        }
        //使用 mount() 方法，装载应用程序实例的根组件
    }).mount('#app'); 
</script>

执行结果：

2.2 number

通过在 v-model 指令中使用 number 修饰符，可以自动将用户输入的内容转换为数值类型。如果转换结果为 NaN，则返回用户输入的原始值。

<input v-model.number="message" placeholder="请输入内容">

2.3 trim

通过 v-model 指令添加 trim 修饰符可以自动过滤用户输入的字符串的收尾空格。

<input v-model.trim="message" placeholder="请输入内容">

pan_junbiao

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录