欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-24 15:53:52
一、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>

运行图:vue指令:v-model绑定表单控件;v-model与v-bind结合使用

② 单选框 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>

运行图: vue指令:v-model绑定表单控件;v-model与v-bind结合使用

③ 多选框 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>

运行图:  vue指令:v-model绑定表单控件;v-model与v-bind结合使用

  •      多个复选框

      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>

 运行图: vue指令:v-model绑定表单控件;v-model与v-bind结合使用