Vue：表单输入绑定

表单输入绑定

表单输入绑定是Vue中最常用的指令之一，它可以让你将表单输入的值与Vue实例中的数据属性绑定在一起。这意味着，当用户输入表单数据时，Vue实例中的数据也会自动更新，反之亦然。这种双向绑定可以极大地简化开发工作，减少了手动更新数据的需要。

在Vue中，表单输入绑定可以使用v-model指令来实现。它可以应用于各种表单元素，如文本框、单选框、复选框、下拉框等。下面是一些示例代码，展示了如何使用v-model指令将表单输入与Vue实例中的数据绑定在一起。

收集表单数据

•  若: <input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
• 若: <input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
• 若: <input type="checkbox"/>
  • 没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
  • 配置input的value属性:
    • (1).v-model的初始值是非数组，那么收集的就是checked(true or false，是布尔值)
    • (2).v-model的初始值是数组，那么收集的的就是value组成的数组([1,2,3])
• v-model的三个修饰符:

  lazy: 失去焦点再收集数据
  number: 输入字符串转为有效的数字
  trim: 输入首尾空格过滤 

   

示例代码：

    <div id="app">
        <form @submit.prevent="save">
            <p>
                文本：<input type="text" v-model.trim="userInfo.account"> 首尾空格过滤 
            </p>
            <p>
                lazy：<input type="text" v-model.lazy.trim="userInfo.lazyContent"> 失去焦点再收集数据(移除输入框)
            </p>
            <p>密码：<input type="password" v-model="userInfo.password"></p>
            <p>数字：<input type="number" v-model="userInfo.age">(字符串)</p>
            <p>数字2：<input type="number" v-model.number="userInfo.sort">(数字)</p>
            <p>性别：
                男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
                女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
                （单选）
            </p>
            <p>是否：
                <input type="checkbox" name="isLike" v-model="userInfo.isLike">
            </p>
            <p>
                爱好：
                学习<input type="checkbox" v-model="userInfo.hobby" value="study">
                打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
                吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
                （多选）
            </p>
            <p>
                地址
                <select v-model="userInfo.city">
                    <option value="">请选择</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="shenzhen">深圳</option>
                    <option value="wuhan">成都</option>
                </select>
                （下拉框）
            </p>
            <p>其他：
                <textarea v-model.lazy="userInfo.other"></textarea>
                （多行文本）
            </p>
            <button>提交</button>
        </form>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                userInfo: {
                    account: '',
                    password: '',
                    age: '18',
                    isLike: '',
                    sort: 1001,
                    sex: 'female',
                    hobby: [],
                    city: 'beijing',
                    other: '',
                    
                    lazyContent:''
                }
            },
            methods: {
                save() {
                    let model = this.userInfo;
                    console.log(JSON.stringify(model))
                }
            },
        })
    </script>