vue2.x笔记3-表单绑定v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

<div id="app">
    <!-- 双向绑定 -->
    <input type="text" v-model="msg"> {{msg}}
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '你好'
        }
    })
</script>

v-model原理

v-model其实是一个语法糖，本质上包含两个操作：

1. v-bind绑定一个value属性
2. v-on指令给当前的元素绑定input事件

<input type="text" v-model="msg">
<!-- 等同于 -->
<input type="text" :value="msg" @input="msg = $event.target.value"> {{msg}}

v-model：radio

多个单选框

<div id="app">
    <label for="male">
        <input type="radio" id="male" value="男" v-model="sex"> 男
    </label>
    <label for="female">
        <input type="radio" id="female" value="女" v-model="sex"> 女
    </label>
    <h2>您选择的性别是：{{sex}}</h2>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '你好',
            sex: '男'
        }
    })
</script>

 v-model：checkbox

复选框分两种情况：单个勾选框和多个勾选框

单个勾选框：

• v-model即为布尔值
• 此时input的value并不影响v-model的值

多个复选框：

• 因为可以选中多个，所以对应的data中的属性是一个数组
• 当选中某一个时，就会将input的value添加到数组中

<div id="app">
    <!-- CheckBox单选框 -->
    <label for="agree">
        <input type="checkbox" id="agree" v-model="isAgree"> 同意协议
    </label>
    <h2>您选择的是：{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>

    <!-- CheckBox多选框 -->
    <label for="basketball">
        <input type="checkbox" id="basketball" value="篮球" v-model="hobbies">篮球
    </label>
    <label for="football">
        <input type="checkbox" id="football" value="足球" v-model="hobbies">足球
    </label>
    <label for="ping-pong">
        <input type="checkbox" id="ping-pong" value="乒乓球" v-model="hobbies">乒乓球
    </label>
    <label for="badminton">
        <input type="checkbox" id="badminton" value="羽毛球" v-model="hobbies">羽毛球
    </label>
    <h2>您选择的是：{{hobbies.join()}}</h2>
    
    <!-- 值绑定 -->
    <label v-for="(item, index) in originHobbies" :for="index">
        <input type="checkbox" :value="item" :id="index" v-model="hobbies1">{{item}}
    </label>
    <h2>您选择的是：{{hobbies1.join()}}</h2>

</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '你好',
            isAgree: false, // 单选框
            hobbies: ['篮球', '乒乓球'], // 多选框
            originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '网球', '台球'], // 值绑定
            hobbies1: ['网球']
        }
    })
</script>

 v-model：select

和checkbox一样，select也分单选和多选

单选：只能选中一个值

• v-model绑定一个值
• 当选中option中的一个时，会将它对应的value赋值到定义的属性中

多选：可以选中多个值

• v-model绑定一个数组
• 当选中多个值时，会将选中的option对应的value添加到数组中

<div id="app">
    <!-- 1、选择一个 -->
    <select v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
        <option value="芒果">芒果</option>
        <option value="橙子">橙子</option>
    </select>
    <h2>您选择的水果是：{{fruit}}</h2>

    <!-- 2、选择多个 -->
    <select v-model="fruits" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
        <option value="芒果">芒果</option>
        <option value="橙子">橙子</option>
    </select>
    <h2>您选择的水果是：{{fruits}}</h2>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '你好',
            fruit: '芒果',
            fruits: []
        }
    })
</script>

 修饰符

lazy修饰符

• 默认情况下，v-model默认是在input事件中同步输入框的数据
• 也就是一旦有数据发生改变对应的data中的数据层就会自动发生改变
• lazy修饰符可以让数据在失去焦点或会车时更新数据

number修饰符

• 默认情况下，在输入框中无论输入的是字母还是数字都会被当做字符串进行处理
• 但如果希望处理的是数字类型，那么最好直接将内容当做数字处理
• number修饰符可以让在输入框中输入的内容自动转成数字类型

trim修饰符

• 如果输入的内容首尾有很多空格，通常希望将其去除
• trim修饰符可以过滤内容左右两边的空格

<div id="app">
    <!-- 1、修饰符 lazy -->
    <input type="text" v-model.lazy="msg">
    <h2>内容：{{msg}}</h2>

    <!-- 2、修饰符 number -->
    <input type="number" v-model.number="num">
    <h2>数字：{{num}} 类型：{{typeof num}}</h2>

    <!-- 3、修饰符 trim -->
    <input type="text" v-model.trim="msg1">
    <h2>内容：--{{msg1}}--</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '你好',
            num: 44,
            msg1: ''
        }
    })
</script>