我是怎么学会vue的13:v-model 表单数据双向绑定

白话前端

什么是双向绑定?
data里是什么,input就显示什么,修改input里的数据,会同步修改data里面对应的数据。

1.v-model结合type类型使用

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

input的数据,和data里面的message,是双向绑定了的。

2.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>
</div>

此时,data的sex属性里面,即存储了sex的值。

radio单选框如何实现单选(排它),有2种方法:

  1. 多个radio添加相同name属性name='sex'
  2. 多个radio添加相同v-model属性v-model='sex'

3.v-model结合checkbox类型使用

checkbox可以用作单选框,也可以用作多选框。

3.1 checkbox用作单选框

checkbox用作单选框,一般用于“用户协议”的勾选,用户选上了之后可以取消勾选(使用单选框的话,用户选中了就没法取消了)。
<label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>

数据:data里存的isAgree是布尔值,true为勾选,false为不勾选。

3.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">羽毛球

数据:在data里面新建一个数组hobbies,会自动存放这些数据的value值。

4.v-model结合select类型使用(不常用)

4.1 单选

<select name="abc" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
</select>

数据:

data: {
    fruit: '香蕉'  //设置了一个默认值,如果不设置次数留空
}

4.2 多选(添加上multiple属性)(使用Ctrl选择多个)

<select name="abc" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
</select>

数据:

data: {
     fruits: []
}

5.input值的绑定

有时表单要显示什么,以及表单元素的value值,不是写死的,而是根据服务器传的数据动态显示的,此时就需要给input绑定值。

举例:这段代码的数据是写死的,但是实际开发中,要显示什么,要根据服务器传入的数据决定,所以这里就需要动态显示。

<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">羽毛球

动态显示的版本(id也可以动态绑定):

<label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>

数据:

data: {
      hobbies: [], // 多选框,
      originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
}

6.v-model的修饰符

6.1 lazy 懒加载

懒加载可以实现“用到的时候才加载”的效果。

用途:v-model是双向绑定的,比如input,我输入一个字符,马上就会同步到data中。但这样的更新频率太高了,我希望在用户输入完,敲击回车或者input失去焦点,再把用户输入的数据同步到data。
<input type="text" v-model.lazy="message">

6.2 number 限制只能输入数字

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

如果不加.number,即使用户输入的是数字,vue在data里存的数据类型也会是字符串。加上之后,data里存的数据类型就是 number 了。

6.3 trim 去掉字符串两边的空格

<input type="text" v-model.trim="name">
阅读 1.3k

100 声望
7 粉丝
0 条评论
100 声望
7 粉丝
文章目录
宣传栏