【Vue】Vue的双向绑定v-model | 使用、原理、绑定表单类型

💭💭

✨： Vue的双向绑定v-model
 
💟：东非不开森的主页
 
💜：如果有幸和你一起学习一起进步，那就太棒啦💜💜
 

一、v-model

1.1.v-model的基本使用

• 双向绑定v-model：数据不仅能能从data流向页面，还可以从页面流向data

• 双向绑定一般都应用在表单类元素 input select

• v-model：value可以简写为v-model 因为v-model默认收集的就是value值

• v-model实现双向绑定

<input type="text" name="" id="" v-model="message" />

 

1.2.v-model绑定原理

⭐⭐
v-model的原理其实是背后有两个操作

• v-bind绑定value属性的值；
• v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；

1. 手动实现了双向绑定，（注意:value = v-bind:value 语法糖）

<input type="text" :value="message" @input="inputChange">

2. v-model实现双向绑定

 <input type="text"  v-model="message" />

这两种是一样的效果
 

1.3.v-model绑定textarea

⭐⭐
绑定表单类型textarea(文本域)

<textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>

 

1.4.v-model绑定checkbox

⭐⭐
v-model绑定checkbox分为：

• 单个勾选框
• 多个勾选框

1. 单个勾选框：

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

checkbox单选框：绑定到属性中的值是一个Boolen

<label for="agree">
    <input type="checkbox" name="" id="agree" v-model="isAgree" />同意协议
</label>

 
2. 多个复选框：

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

checkbox多选框;绑定到属性中的值是一个Array
 

      <!-- 2.checkbox多选框;绑定到属性中的值是一个Array ,多选框当中，继续明确的绑定一个value值-->
      <div class="hobbies">
        <h2>请选择你的爱好</h2>
        <label for="sing">
          <input type="checkbox" id="sing" v-model="hobbies" value="sing"/>唱歌
        </label>
        <label for="coding">
          <input type="checkbox" id="coding" v-model="hobbies" value="coding"/>敲代码
        </label>
      </div>

1.5.v-model绑定radio

.⭐⭐
v-model绑定radio，用于选择其中一项；
 
案例：选择性别的时候，只能选一个

<label for="male">
    <input type="radio" id="male" v-model="gender" value="male" />男
</label>
<label for="female">
    <input type="radio" id="male" v-model="gender" value="female"/>女
 </label>

 

1.6.v-model绑定select

⭐⭐
select也分单选和多选两种情况:
 

单选：只能选中一个值

• v-model绑定的是一个值；
• 当我们选中option中的一个时，会将它对应的value赋值到fruit中；
   

<div id="app">
      <!-- select的单选 -->
      <select name="" id="" v-model="fruit">
        <option value="apple">苹果</option>
        <option value="orange">橘子</option>
      </select>
      <h2>单选：{{fruit}}</h2>
</div>

 
多选：可以选中多个值

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

 <div id="app">
      <!-- select的多选 -->
      <select name="" id="" multiple v-model="fruits">
        <option value="apple">苹果</option>
        <option value="orange">橘子</option>
        <option value="banana">香蕉</option>
      </select>
    </div>

 

1.7.v-model的值绑定

.⭐⭐

• 在真实开发中，我们的数据可能是来自服务器的
• 那么我们就可以先将值请求下来，绑定到data返回的对象中，
• 再通过v-bind来进行值的绑定，这个过程就是值绑定。

举例：select的值绑定

<select name="" id="" multiple size="3" v-model="fruits">
        <option v-for="item in allFruits" :key="item.value" 		  :value="item.value">
          {{item.text}}
        </option>
</select>

 

1.8.v-model的修饰符

⭐⭐

• lazy :绑定change事件
• number :自动将内容转换成数字
• trim：去除首尾的空格

用法：直接加在v-model后面就可以了
比如

// lazy
<input type="text" name="" id="" v-model.lazy="message" />
//number
<input type="text" v-model.number="counter" />
//trim
<input type="text" v-model.trim="content" />