vue指令：v-model绑定表单控件；v-model与v-bind结合使用
程序员文章站
2022-05-21 17:21:26
一、v-model绑定表单控件 v-model 双向数据绑定；一般用于表单元素，会忽略表单元素的value、checked、selected的初始值，且将Vue实例的数据作为数据来源。 ① 单行文本框 input[type="text"] 、多行文本框 textarea： v-model值绑定到va ......
一、v-model绑定表单控件
v-model 双向数据绑定；一般用于表单元素，会忽略表单元素的value、checked、selected的初始值，且将vue实例的数据作为数据来源。
① 单行文本框 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>
运行图：