020 V 表单控件的基本用法
本帖最后由 不二如是 于 2018-9-19 15:48 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们做了一个小综合的练习将前面的知识点串了一遍。
本次学习表单类控件的基本用法，表单主要承载了一个网页数据的录入与交互。
表单控件在实际业务中非常普遍，比如单选、多选、下拉选择、输入框等。
用它们可以完成数据的录入、校验、提交等功能。
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、如果希望实时更新数据我们可以用什么方法？
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 谢谢楼主 1.数据的录入与交互
2.不会
3.使用@input绑定一个方法 1 0 1
页:
[1]