v-model｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第20天表单控件在实际开发中是非常常见的。特别

这是我参与「第四届青训营」笔记创作活动的的第20天

表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。 Vue中使用v-model指令来实现表单元素和数据的双向绑定。

v-model原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作︰

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

<div id='app'>
<!-- <input type="text" v-model="messege"> -->
<!-- <input type="text" :value="messege" @input="valuechange"> -->
<input type="text" :value="messege" @input="messege = $event.target.value">

{{messege}}
</div>
<script src='./vue.js'></script>
<script>
  const app = new Vue({
      el : '#app',
      data : {
        messege : 'hello world'
      },
      methods : {
        valuechange(event){
          this.messege = event.target.value
        }
      },
      computed : {}
  })
</script>

数据双向绑定

默认情况下Vue只支持数据单向传递 M-> VM -> V 但是由于Vue是基于MVVM设计模式的,所以也提供了双向传递的能力在<input>、<textarea> 及 <select> 元素上可以用 v-model 指令创建双向数据绑定

注意点:v-model会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue实例的数据作为数据来源

input值绑定

仔细阅读之后，发现很简单，就是动态的给value赋值而已: 我们前面的value中的值，可以回头去看一下，都是在定义input的时候直接给定的。但是真实开发中，这些input的值可能是从网络获取或定义在data中的。所以我们可以通过v-bind:value动态的给value绑定值。这不就是v-bind吗?

<div id='d'>
  <label v-for="item in originHobbies">
    <input type="checkbox" :value="item" v-model="hobbies">{{item}}
  </label>
  <h3>{{hobbies}}</h3>
</div>
<script src='./vue.js'></script>
<script>
    const d = new Vue({
        el : '#d',
        data : {
          isAgree : false,
          hobbies : [],
          originHobbies : ['抽烟','喝酒','烫头']
        },
        methods : {},
        computed : {}
    })
</script>

修饰符

lazy修饰符∶

默认情况下, v-model默认是在input事件中同步输入框的数据的。也就是说，—旦有数据发生改变对应的data中的数据就会自动发生改变。

lazy修饰符可以让数据在失去焦点或者回车时才会更新:

input事件在用户输入的时候会实时地、连续地触发
blur事件在输入框失去焦点时触发;
change事件在用户输入的值与上一次输入的值不同。并且输入框失去焦点时触发。

number修饰符:

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。

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

trim修饰符:

如果输入的内容首尾有很多空格，通常我们希望将其去除

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

<div id='e'>
  <!-- 1. lazy 修饰符 -->
  <input type="text" v-model.lazy="messege">
  <h4>{{messege}}</h4>

  <!-- 2. number 修饰符 -->
  <input type="number" v-model.number="age">
  <h4>{{age}}--{{typeof age}}</h4>

  <!-- 3. trim 修饰符 -->
  <input type="text" v-model.trim.lazy="name">
  <h4>你输入的名字：{{name}}</h4>

</div>
<script src='./vue.js'></script>
<script>
    const e = new Vue({
        el : '#e',
        data : {
          messege : 'hello world',
          age : 0,
          name : ''
        },
        methods : {},
        computed : {}
    })
</script>

v-model:radio

相同的name，在提交表单时只会提交一份，所以会互斥

label是将内容绑到一起，不用必须点击圆圈

<div id='a'>
  <label for="male">
    <input type="radio" id="male" name="gender" value="男" v-model="gender">男
  </label>
  <label for="female">
    <input type="radio" id="female" name="gender" value="女" v-model="gender">女
  </label>
  <h3>您选择的性别是：{{gender}}</h3>
</div>
<script src='./vue.js'></script>
<script>
    const a = new Vue({
        el : '#a',
        data : {
          gender : '男'
        },
        methods : {},
        computed : {}
    })
</script>

v-model:checkbox

复选框分为两种情况∶单个勾选框和多个勾选框复选框绑定的值是字符串类型的时候获得布尔值，如果是数组则是取value值要获取多个value只能使用数组[]，不能使用对象或者其他

<div id='b'>
  <!-- 单选框 -->
  <label>
    <input type="checkbox" v-model="isAgree">同意协议
  </label>
  <h3>{{isAgree}}</h3>

  <!-- 多选框 -->
  <label> <input type="checkbox" v-model="hobbies" value="篮球">篮球 </label>
  <label> <input type="checkbox" v-model="hobbies" value="足球">足球 </label>
  <label> <input type="checkbox" v-model="hobbies" value="羽毛球">羽毛球 </label>
  <label> <input type="checkbox" v-model="hobbies" value="乒乓球">乒乓球 </label>
  <h3>{{hobbies}}</h3>
</div>
<script src='./vue.js'></script>
<script>
    const b = new Vue({
        el : '#b',
        data : {
          isAgree : false,
          hobbies : []
        },
        methods : {},
        computed : {}
    })
</script>

v-model:select

和checkbox一样，select也分为单选和双选两种情况

单选:只能选中一个值。 v-model绑定的是一个值。 当我们选中option中的一个时，会将它对应的value赋值到mySelect中多选:可以选中多个值。 v-model绑定的是一个数组。 当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

<div id='c'>
  <!-- 选择一个 -->
  <select name="aaa" v-model="drink">
    <option value="可乐">可乐</option>
    <option value="雪碧">雪碧</option>
    <option value="营养快线">营养快线</option>
    <option value="奶茶">奶茶</option>
    <option value="牛奶">牛奶</option>
  </select>
  <h3>{{drink}}</h3>

  <!-- 选择多个 多选要加属性 multiple  按住ctrl键选择-->
  <select name="aaa" v-model="drinks" multiple>
    <option value="可乐">可乐</option>
    <option value="雪碧">雪碧</option>
    <option value="营养快线">营养快线</option>
    <option value="奶茶">奶茶</option>
    <option value="牛奶">牛奶</option>
  </select>
  <h3>{{drinks}}</h3>
</div>
<script src='./vue.js'></script>
<script>
    const c = new Vue({
        el : '#c',
        data : {
          drink : '奶茶',
          drinks : []
        },
        methods : {},
        computed : {}
    })
</script>

v-model｜ 青训营笔记