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

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 指令将文本框和定义的数据进行绑定。

html 复制代码
<!-- 绑定:文本框 -->
<input type="text" v-model="userModel.userName"/>

1.2 单选按钮的绑定

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

html 复制代码
<!-- 绑定:单选按钮 -->
<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 绑定的属性值会被赋值为显示在该选项中的文本。

html 复制代码
<!-- 绑定:下拉列表框 -->
<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 指令会自动根据数组里的值与复选框进行绑定。

html 复制代码
<!-- 绑定:复选框 -->
<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 文件,代码如下:

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 事件进行同步。示例代码如下:

html 复制代码
<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,则返回用户输入的原始值。

html 复制代码
<input v-model.number="message" placeholder="请输入内容">

2.3 trim

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

html 复制代码
<input v-model.trim="message" placeholder="请输入内容">
相关推荐
拾光拾趣录1 分钟前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录21 分钟前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区32 分钟前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠1 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8682 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie2 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_2 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api