020 V 表单控件的基本用法

不二如是

                               
登录/注册后可看大图

上一讲我们做了一个小综合的练习将前面的知识点串了一遍。

本次学习表单类控件的基本用法，表单主要承载了一个网页数据的录入与交互。

表单控件在实际业务中非常普遍，比如单选、多选、下拉选择、输入框等。

用它们可以完成数据的录入、校验、提交等功能。

Vue中提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用。

那么输入的内容会实时映射到绑定的数据上。

我们来编写代码，创建div：

1. <div id="myApp">
   
2.     <input type="text" v-model="message" placeholder="请输入内容...">
   
3. <p>鱼油输入的内容是：{{message}}</p>
   
4. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             message:''
   
6.         }
   
7.     })
   
8. </script>

复制代码

在输入框输入的同时，{{message}}也会实时将内容渲染在视图中。

对于文本元素<textarea>也是同样的用法。

创建div：

1. <div id="myApp">
   
2.     <textarea v-model="text" placeholder="请输入..."></textarea>
   
3.     <p>鱼油输入的内容是：{{text}}</p>
   
4. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             text:''
   
6.         }
   
7.     })
   
8. </script>

复制代码

使用v-model后，表单控件显示的值只依赖所绑定的数据，不在关系初始化时的value属性。

对于在textarea元素间插入的值，也不会生效。

使用v-model时，如果引用中文输入法输入中文，一般在没有选定词组前，也就是在正在输入拼音的阶段，Vue不会自动更新。

如果希望实时更新，可以用@input代替v-model。

我们来举个例子，创建div：

1. <div id="myApp">
   
2.     <input type="text" @input="autoInput" placeholder="请输入...">
   
3.     <p>鱼油输入的内容是：{{message}}</p>
   
4. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             message:''
   
6.         },
   
7.         methods:{
   
8.             autoInput:function (e) {
   
9.                 this.message = e.target.value;
   
10.             }
    
11.         }
    
12.     })
    
13. </script>

复制代码

---

课后作业


1、表单承载了网页数据的哪些需求？

2、在输入中文时，拼音会自动显示？

3、如果希望实时更新数据我们可以用什么方法？



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

zbmio

谢谢楼主

Ruide

1.数据的录入与交互
2.不会
3.使用@input绑定一个方法

优时风

1

一笙彤

0

jack6666

1