020 V 表单控件的基本用法

不二如是

                               
登录/注册后可看大图

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

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

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

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

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

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

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

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

创建Vue实例：

<script>
    var app = new Vue({
        el:"#myApp",
        data:{
            message:''
        }
    })
</script>

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

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

创建div：

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

创建Vue实例：

<script>
    var app = new Vue({
        el:"#myApp",
        data:{
            text:''
        }
    })
</script>

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

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

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

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

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

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

创建Vue实例：

<script>
    var app = new Vue({
        el:"#myApp",
        data:{
            message:''
        },
        methods:{
            autoInput:function (e) {
                this.message = e.target.value;
            }
        }
    })
</script>

---

课后作业


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

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

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



答案：

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

---

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

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

zbmio

谢谢楼主

Ruide

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

优时风

1

一笙彤

0

jack6666

1