关于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元素来实现双向绑定   -->
    <textarea v-model="message"></textarea>
    <p>输入的内容是：{
   
   {message}}</p>
</div>
<script>
    let app = new Vue({
     
     
        el:"#app",
        data:{
     
     
            message:''
        }
    })
</script>

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

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

<div id = "app">
    <!--使用label点击文字也可以实现功能-->
    <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>
</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添加到数组中

<div id = "app">
    <!-- 单选框-->
    <label for = "one">
        <input type="checkbox" id="one" v-model= "isone">点我同意下一步
    </label>
    <button :disabled= "!isone" >下一步</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中

<div id = "app">
    <!-- 选择一个-->
    <select name="abc" v-model="sister">
        <option value = "小花">小花</option>
        <option value = "大喜">大喜</option>
        <option value = "佳哥">佳哥</option>
        <option value = "静姐">静姐</option>
    </select>
    
    <!-- 选择多个时要在section里多加一个 multiple -->
    <select name="abc" v-model="sisters"  multiple>
        <option value = "小花">小花</option>
        <option value = "大喜">大喜</option>
        <option value = "佳哥">佳哥</option>
        <option value = "静姐">静姐</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">