vue指令：v-model绑定表单控件；v-model与v-bind结合使用

佚名 6年前 (2019-04-17) 随笔 688人围观抢沙发百度已收录

一、v-model绑定表单控件

v-model 双向数据绑定；一般用于表单元素，会忽略表单元素的value、checked、selected的初始值，且将Vue实例的数据作为数据来源。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

① 单行文本框 input[type="text"] 、多行文本框 textarea：

　 v-model值绑定到value属性；

 1 <body>  2 <div id="app">  3 <input type="text" v-model="username" value="我是初始值，但是我被忽略了"><br/>  4 <textarea v-model="schoolname" value="我是初始学校：北大青鸟"></textarea><br/>  5 </div>  6 <script src="./vue.js"></script>  7 <script>  8 var vm = new Vue({  9 el:'#app', 10  data:{ 11 　　username:'小鸣', 12 　　schoolname:'XX科技大学' 13  } 14  }) 15 </script> 16 </body>

运行图：

② 单选框 input[type="radio"]：

　 v-model 值绑定到 value属性；

 1 <body>
 2    <div id="app" style="padding-left:10px;">
 3       <input type="radio" name="fruit" value="apple" v-model="radioValue">apple
 4       <input type="radio" name="fruit" value="pear" v-model="radioValue">pear
 5       <input type="radio" name="fruit" value="banana" v-model="radioValue">banana
 6       <p>radioValue: {{radioValue}}</p>
 7    </div>
 8    <script src="./vue.js"></script>
 9    <script>
10       var vm = new Vue({
11          el:'#app',
12          data:{
13             radioValue:'pear',
14          }
15       })
16    </script>
17 </body>

运行图：

③ 多选框 input[type="checkbox"]：

　单个复选框：

　　　　 v-model 值为布尔值（true、false），绑定到 checked属性；

 1 <body>
 2    <div id="app" style="padding-left:10px;">
 3       <input type="checkbox" v-model="checkValue"><br/>
 4       <p>checkValue: {{checkValue}}</p>
 5    </div>
 6    <script src="./vue.js"></script>
 7    <script>
 8       var vm = new Vue({
 9          el:'#app',
10          data:{
11             checkValue:true
12          }
13       })
14    </script>
15 </body>

运行图：

多个复选框

　　　　 v-model 值为数组，绑定到 value属性（checkbox的vulue属性值必须要有）；

 1 <body>
 2    <div id="app" style="padding-left:10px;">
 3       <input type="checkbox" v-model="moreCheck" value="box1">box1
 4       <input type="checkbox" v-model="moreCheck" value="box2">box2
 5       <input type="checkbox" v-model="moreCheck" value="box3">box3
 6       <p>moreCheck: {{moreCheck}}</p>
 7    </div>
 8    <script src="./vue.js"></script>
 9    <script>
10       var vm = new Vue({
11          el:'#app',
12          data:{
13             moreCheck:['box2','box3']
14          }
15       })
16    </script>
17 </body>