关于Vue的一些小笔记（五）表单--v-model的使用

前言：这次笔记的主要内容为：v-model的具体使用方法。

一、表单绑定v-model

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

（1）双向绑定的原理

• 我们在输入框中输入内容
• input中的v-model绑定了message，所以会实时将输入的内容传给message，message发生改变
• message发生改变时，因为我们使用了Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变
• 故通过v-model实现了双向绑定

<div id="app">
    <input type="text" v-model="message">
    <h2>{{message}}h2>
    
    
    <textarea v-model="message">textarea>
    <p>输入的内容是：{{message}}p>
div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            message:''
        }
    })
script>

（2）v-model结合radio类型使用

这个例子可以实现多个复选框里只选择一个（多选一）

    
    <label for="male">
        <input type="radio" id="male" value="男" v-model="sex">男
    label>
    
    label>
div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            message:"你好啊",
            sex:"男"
        }
    })
script>

（3）v-model结合checkbox类型使用

checkbox单选框：

• 对应的v-model绑定的是一个布尔值
• 此时input的value不影响v-model的值

checkbox多选框：

• 对应的v-model绑定的是一个数组（data属性中）
• 当选中某一个时，就会将input的value添加到数组中

    
    
        点我同意下一步
    label>
    下一步button>
    
    
    <input type="checkbox" value="苹果" v-model="fruit">苹果
    <input type="checkbox" value="石榴" v-model="fruit">石榴
    <input type="checkbox" value="西瓜" v-model="fruit">西瓜
    <input type="checkbox" value="香蕉" v-model="fruit">香蕉
div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            message:"你好",
            isone:false,  //布尔值
            fruit:[]  //绑定数组
        }
    })
script>

（4）v-model结合select类型使用

单选：只能选中一个值

• v-model绑定的是一个值（在select里绑定）
• 当选中option中的一个时，会将它对应的value赋值到sister中

多选：可以选中多个值

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

    
    <select name="abc" v-model="sister">
        小花option>
        大喜option>
        佳哥option>
        静姐option>
    select>
    
    
    <select name="abc" v-model="sisters"  multiple>
        小花option>
        大喜option>
        佳哥option>
        静姐option>
    select>
div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            sister:'大喜',
            sisters:[]
        }
    })
script>

二、值绑定

其实就是不把value的值写死，用一个定义在data里的数组或者是网络中获取的值来循环value。总的来说就是：动态的给value赋值

 <input type="checkbox" value="苹果" v-model="fruit">苹果
 <input type="checkbox" value="石榴" v-model="fruit">石榴
 <input type="checkbox" value="西瓜" v-model="fruit">西瓜
 <input type="checkbox" value="香蕉" v-model="fruit">香蕉


<label v-for="item in fruitss" v-bind:for="item">
    <input type="checkbox" v-bind:value="item" :id="item" v-model="fruitss">{{item}}
label>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            fruitss:["苹果","西瓜","石榴","香蕉","樱桃","橙子"]
        }
    })
script>

三、v-model修饰符的使用

（1）lazy修饰符

• 默认情况下，v-model默认是在input事件中同步输入框的数据

• 就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变

• lazy修饰符可以让数据在失去焦点或者回车时才会更新（不会实时更新）

  <input type="text" v-model.lazy="message">
  

（2）number修饰符

• 默认情况下，在输入框中无论输入数字还是字母，v-model都会把他们当做字符串类型来处理

• number修饰符可以让在输入框中输入的内容自动转化成数字类型

  <input type="text" v-model.number="age">
  

（3）trim修饰符

• 如果输入的内容首尾有很多空格（在页面中是看不到的，但在控制台可以看到），我们都想将他除去

• 使用trim修饰符可以过滤内容左右两边的空格

  <input type="text" v-model.trim="message">