Vue.js双向数据绑定与修饰符详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45758587/article/details/109754768

本文详细介绍了Vue.js中的双向数据绑定原理，包括在不同表单元素中的应用，如单行文本框、多行文本框、复选按钮、单选按钮和下拉菜单。同时，还探讨了v-model的修饰符，如lazy用于在change事件后同步，number用于将输入值转换为数值类型，以及trim用于去除用户输入的首尾空白字符。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

双向数据绑定

用v-model指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
   <style>
       table{
           border-collapse: collapse;
       }
       td{
           width: 100px;
           height: 30px;
           border: 1px solid red;
           text-align: center;
       }
   </style>
</head>
<body>
    <div id="app">
        <!-- trim 自动过滤用户输入的首尾空白字符 -->
        |<b>{{value}}</b>|
        <input type="text" v-model.trim='value'>
        <!-- 下拉框 -->
        <b>{{select}}</b>
        <select name="" id="" v-model.number="select" multiple>
            <option value="11">11</option>
            <option value="22">22</option>
            <option value="33">33</option>
        </select>
        <!-- 多选框 -->
        <!-- 实现批量删除 -->
        <b>{{checks}}</b>
        <table>
            <tr v-for='item in users'>
                <td>
                    <input type="checkbox" :value="item.id" v-model='checks'>
                </td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.gender}}</td>
            </tr>
        </table>
        <button>批量删除</button>
        <hr>
        <!-- 单选框 -->
        性别：
        <b>{{gender}}</b>
        男：<input type="radio" value="men" v-model='gender'> 
        女：<input type="radio" value="women" v-model='gender'> 
        <hr>
        <b>{{value}}</b>
        <!-- 单行文本框 -->
        <input type="text" v-model='value'>
        <!-- 多行文本框 -->
        <textarea cols="30" rows="10" v-model='value'></textarea>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                value:'lisi',
                gender:'',
                users:[{
                    id:1,
                    name:'lisi',
                    age:20,
                    gender:'men'
                },{
                    id:2,
                    name:'tom',
                    age:30,
                    gender:'men'
                },{
                    id:3,
                    name:'terry',
                    age:30,
                    gender:'men'
                },],
                checks:[],
                select:[]
            },
            methods:{
                submit(){
                    // this.gender-->ajax 发送表单请求
                    // this.checks-->ajax
                }
            }

        })
    </script>
</body>
</html>

1）单行文本框

2)多行文本框

3)复选按钮

4）单选按钮

5）下拉菜单

<select name="" id="" v-model.number="select" multiple>
            <option value="11">11</option>
            <option value="22">22</option>
            <option value="33">33</option>
</select>