v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data选项中声明初始值。

对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用 input 事件。

一、input输入框绑定实例:

实现思路:

   分别定义data下的name,age,like,作为其初始值,当input输入框内的信息变化时,下面内容会发生变化,并更改data下的值。

Vue.js框架 v-model指令_v-model



全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--学生成绩表-->
<div id="app" class="container">
   <div class=" col-xs-4 col-md-offset-4">
   <h1>个人信息</h1>

<div>姓名:<input type="text" v-model="name" class="form-control text-center" placeholder="请输入你的个人信息">
   <pre>{{ name }}</pre>
   </div>
      <div>年龄:<input type="text" v-model="age" class="form-control text-center" placeholder="年龄">
         <span>{{   age }}</span>
      </div>
      <div>爱好:<input type="text" v-model="like" class="form-control text-center" placeholder="爱好">
         <span>{{   like }}</span>
      </div>
</div>

</div>




<script>
 var app  = new  Vue({
      el:"#app",
 data:{
         name:"李四",
 age:24,
 like:"跑步"
 },
 computed:{
         sum: function () {
            return  this.math + this.physics + this.english

 },
 average:function () {
            return Math.round((this.sum/3))

         }
      }
   })


</script>




</body>
</html>
核心代码:
<div id="app" class="container">
   <div class=" col-xs-4 col-md-offset-4">
   <h1>个人信息</h1>

<div>姓名:<input type="text" v-model="name" class="form-control text-center" placeholder="请输入你的个人信息">
   <pre>{{ name }}</pre>
   </div>
      <div>年龄:<input type="text" v-model="age" class="form-control text-center" placeholder="年龄">
         <span>{{   age }}</span>
      </div>
      <div>爱好:<input type="text" v-model="like" class="form-control text-center" placeholder="爱好">
         <span>{{   like }}</span>
      </div>
</div>

</div>

<script>
   var app  = new  Vue({
      el:"#app",
      data:{
         name:"李四",
         age:24,
         like:"跑步"
      },

   })

</script>

v-model的修饰符

   input事件触发后将输入框的值与数据进行同步,当我们不想其更新太频繁的时候,就可以选择使用.lazy修饰符,就可以让其更新频率降低。此外input输入内容的类型均为字符格式,对于一些固定是数字的格式我们可以使用.number修饰符将其转换为数字,方便运算操作,不需要后期转换类型。

.lazy

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:

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

这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。

在data定义的age为×××的数字,当我们重新输入内容时,发现其变为字符类型,这时我们可以加上.number的修饰符

Vue.js框架 v-model指令_js_02



Vue.js框架 v-model指令_Vue_03

添加.number修饰符后

Vue.js框架 v-model指令_js_04

Vue.js框架 v-model指令_v-model_05

.trim

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:


<input v-model.trim="msg">

未添加.trim属性前(注意普通的html对空格不敏感一般默认为一个,这里引入<pre></pre>标签)

Vue.js框架 v-model指令_js_06

添加其修饰符后

Vue.js框架 v-model指令_Vue_07

二、input 输入框类型为单选框

<h2>性别</h2>
<label>男:
   <input type="radio"   v-model="sex" value="male"  class="">
</label>


<label>女
   <input type="radio"   v-model="sex"  value="female" ></label>
<hr>
 性别:{{ sex }}
 
 <script>
   var app  = new  Vue({
      el:"#app",
      data:{
         name:"李四",
         age:24,
         like:"跑步",
         sex:'female'
      },
   })

</script>

Vue.js框架 v-model指令_v-model_08    Vue.js框架 v-model指令_js_09

三、input 输入框类型为复选框

<h2>爱好:</h2>
<label class="btn btn-default">跑步
   <input type="checkbox"   v-model="like" value="跑步"  >
</label class="btn btn-default">
<label class="btn btn-default">爬山
   <input type="checkbox"   v-model="like" value="爬山" >
</label >
<label class="btn btn-default">阅读
   <input type="checkbox"   v-model="like" value="阅读" >
</label>
<label class="btn btn-default">游泳
   <input type="checkbox"   v-model="like" value="游泳"  >
</label class="btn btn-default">
<label class="btn btn-default">逛街
   <input type="checkbox"   v-model="like" value="逛街" >
</label >
<label class="btn btn-default">健身
   <input type="checkbox"   v-model="like" value="健身" >
</label>

<hr>
爱好:{{ like }}

<script>
   var app  = new  Vue({
      el:"#app",
      data:{
         name:"李四",
         age:24,
         info:"长江后浪推前浪",
         sex:'female',
         like:[]

      },
   })

</script>


    Vue.js框架 v-model指令_trim_10      Vue.js框架 v-model指令_js_11


四、多行文本textarea 

多行文本
{{msg}}
<script>
   var app  = new  Vue({
      el:"#app",
      data:{
         name:"李四",
         age:24,
         info:"长江后浪推前浪",
         sex:'female',
         like:[],
         msg:"多行文本"

      },
   })

</script>

Vue.js框架 v-model指令_js_12

在文本区域插值 (<textarea></textarea>) 并不会生效,应用 v-model 来代替。

五、选择框

1、单选

<hr>单选

   <select v-model="selecte">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
   </select>
   <span>Selected: {{ selecte }}</span>

<hr>
<script>
   var app  = new  Vue({
      el:"#app",
      data:{
         name:"李四",
         age:24,
         info:"长江后浪推前浪",
         sex:'female',
         like:[],
         msg:"多行文本",
         selecte:'',
         selected:[]

      },
   })

</script>

Vue.js框架 v-model指令_js_13

2、多选

<hr>
<select v-model="selected" multiple style="width: 50px;">
   <option>A</option>
   <option>B</option>
   <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
<script>
   var app  = new  Vue({
      el:"#app",
      data:{
         name:"李四",
         age:24,
         info:"长江后浪推前浪",
         sex:'female',
         like:[],
         msg:"多行文本",
         selected:[]

      },
   })

</script>

Vue.js框架 v-model指令_v-model_14Vue.js框架 v-model指令_js_15

用 v-for 渲染的动态选项

<select v-model="selected">
 <option v-for="option in options" v-bind:value="option.value">
   {{ option.text }}
 </option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
 el: '...',
 data: {
   selected: 'A',
   options: [
     { text: 'One', value: 'A' },
     { text: 'Two', value: 'B' },
     { text: 'Three', value: 'C' }
   ]
 }
})

Vue.js框架 v-model指令_v-model_16