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

v-model指令实现表单元素和数据的双向绑定

1、v-model的原理

v-model其实就是一个语法糖。它的本质包含两个操作：

• 用v-bind绑定一个value属性
• 用v-on给当前元素添加一个input事件

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

实例如下：

<div id="app">
<!--<input type="text" v-model="message">-->
<!--input标签有一个input事件监听用户的输入-->
<!--valueChange默认传值$event-->
<!--<input type="text" :value="message" @input="valueChange">-->
    <input type="text" :value="message" @input="message = $event.target.value">
    <h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
       el: '#app',
       data: {
           message: '你好啊'
       },
        methods: {
            valueChange(event) {
                this.message = event.target.value;
            }
        }
    });
</script>

2、v-model与radio类型结合使用

实例：

<div id="app">
<!--name为一样的值，这样就只能选择一项-->
<!--如果两个单选框绑定一个值，则不需要name属性，也能实现只能选择其中一项的效果-->
    <label for="male">
	<!--<input type="radio" id="male" name="sex" value="男" v-model="sex">男-->
        <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" id="female" name="sex" value="女" v-model="sex">女
    </label>
    <h2>您选择的性别是：{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
       el: '#app',
       data: {
           sex: '男'
       }
    });
</script>

3、v-model与checkbox类型结合使用

checkbox类型包含单选框和多选框两种：

• 单选框：v-model即为布尔值；此时input的value值并不影响v-model的值
• 多选框：当是复选框时，可以选择多个，它对应的数据data中的属性是一个数组，当选中某一个时，就会将input的value值添加到数组中
  实例：

<div id="app">
    <!--1.checkbox单选框-->
<!--    <label for="licence">-->
<!--        <input type="checkbox" id="licence" v-model="isAgree">同意协议-->
<!--    </label>-->
<!--    <h2>您选择的是: {{isAgree}}</h2>-->
<!--    <button :disabled="!isAgree">下一步</button>-->
    <!--2.checkbox多选框-->
    <input type="checkbox" value='篮球' v-model="hobbies">篮球
    <input type="checkbox" value='足球' v-model="hobbies">足球
    <input type="checkbox" value='羽毛球' v-model="hobbies">羽毛球
    <input type="checkbox" value='乒乓球' v-model="hobbies">乒乓球
    <h2>您的爱好是: {{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isAgree: false,
            hobbies: []
        }
    });
</script>

4、v-model与select类型结合使用

与checkbox类型类似：也存在单选和多选两种情况
实例：

<div id="app">
<!--1.选择一个-->
    <select name="abc" id=""  v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="水蜜桃">水蜜桃</option>
        <option value="橘子">橘子</option>
    </select>
    <h2>您选择的水果是: {{fruit}}</h2>
<!--选择多个-->
    <select name="abc"  v-model="fruits" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="水蜜桃">水蜜桃</option>
        <option value="橘子">橘子</option>
    </select>
    <h2>您选择的水果是: {{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
       el: '#app',
       data: {
           message: '你好啊',
           fruit: '香蕉',
           fruits: []
       }
    });
</script>

5、v-model修饰符

1. lazy修饰符：可以让数据在失去焦点或点击回车时才更新
2. number修饰符：可以让输入框中输入的内容自动转为数字类型
3. trim修饰符：可以过滤内容左右两边的空格
   实例：

<div id="app">
    <!--1.lazy修饰符: 回车、失去焦点才会进行数据更新-->
    <input type="text" v-model.lazy="message">
    <h2>{{message}}</h2>
    <!--2.number修饰符: 数据作为数字处理-->
    <input type="number" v-model.number="age">
    <h2>{{age}} -- {{typeof age}}</h2>
    <!--3.trim修饰符: 去除两端空格-->
    <input type="text" v-model.trim="name">
    <h2>您输入的数据是：{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            age: 18,
            name: ''
        }
    });
</script>