全国服务热线:4008-888-888

公司新闻

微信小程序制作平台_Vuejs学习笔记之使用指令v

Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定       表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值。感兴趣的朋友跟随小编一起看看吧

表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定。

6.1 基本用法

表单控件在实际业务较为常见,比如单选、多选、下拉选择、输入框等,用它们可以完成数据的录入、校验、提交等。
Vue.js提供了v-model指令,用于在表单类元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上。

 例如下面的例子:

 div id="app" 
 input type="text" v-model="message" placeholder="请输入..." 
 p 输入的内容是:{{message}} /p 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 /script 

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

 如图6-1所示:

对于文本域 textarea 也是同样的用法:

 div id="app" 
 textarea v-model="text" placeholder="请输入..." /textarea 
 p 输入的内容是: /p 
 p {{text}} /p 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 text: ""
 /script 

提示:
 提示v-model后,表单控件显示的值只依赖所绑定的数据,不再关心初始化时的value属性,对于在 textarea /textarea 之间插入的值,也不会生效。  使用v-model时,如果是用中文输入法输入中文,一般在没有选定词组前,也就是在拼音阶段,Vue是不会更新数据的,当敲下汉字时才会触发鞥新。  如果希望总是实时更新,。  事实上,v-model也是一个特殊的语法糖,只不过它会在不同的表单上智能处理。  例如下面的示例:

input type="text" @input="handleInput" placeholder="请输入..." p 输入的内容是:{{message}} /p /div script var app = new Vue({ el: "#app", data: { message: "" methods: { handleInput: function(event) { this.message = event.target.value; /script

来看看更多的表单控件。

单选按钮:

单选按钮在单独使用时,不需要v-model,直接使用v-bind绑定一个布尔类型的值,为true时选中,为false时不选。
 例如:

 div id="app" 
 input type="radio" :checked="picked" 
 label 单选按钮 /label 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 picked: true
 /script 

如果是组合使用来实现互斥选择的效果,就需要v-model配合value来使用:

 div id="app" 
 input type="radio" v-model="picked" value="html" id="html" 
 label for="html" HTML /label 
 input type="radio" v-model="picked" value="js" id="js" 
 label for="js" JavaScript /label 
 input type="radio" v-model="picked" value="css" id="css" 
 label for="css" CSS /label 
 p 您选择的是:{{picked}} /p 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 picked: "js"
 /script 

数据picked的值与表单按钮的value值一致时,就会选中该项,所以当前状态下选中的是第二项。
 如图6-2所示:

复选框:

复选框也分单独使用和组合使用,不过用法稍与单选不同。

 复选框单独使用时,也是用v-model来绑定一个布尔值。

 例如:

 div id="app" 
 input type="checkbox" v-model="checked" id="checked" 
 label for="checked" 选择状态:{{checked}} /label 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 checked: false
 /script 

在勾选时,数据checked的值改为了true, label 中渲染的内容也会更新。

组合使用时,也是v-model与value一起,多个勾选框都绑定到同一个数组类型的数据,value的值在数据当中,就会选中这一项。

 这一过程也是双向的,在勾选时,value的值也会自动push到这个数组中。

 实例代码如下:

 div id="app" 
 input type="checkbox" v-model="checked" value="html" id="html" 
 label for="html" HTML /label 
 input type="checkbox" v-model="checked" value="js" id="js" 
 label for="js" JavaScript /label 
 input type="checkbox" v-model="checked" value="css" id="css" 
 label for="css" CSS /label 
 p 你选择的是:{{checked}} /p 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 checked: ["html", "css"]
 /script 

当前状态下的结果如图6-3所示:

选择列表:

选择列表就是下拉选择器,也是常见的表单控件,同样也分为单选和多选两种方式。
 先看一下单选的示例代码:

 div id="app" 
 select v-model="selected" 
 option html /option 
 option value="js" JavaScript /option 
 option css /option 
 /select 
 p 你选择的是:{{selected}} /p 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 selected: "html"
 /script 

option 是备选项,如果含有value属性,v-model就会优先匹配value的值; 

如果没有,就会直接匹配 option 的text。

 比如选中第二项时,selected的值为js,而不是JavaScript。

给 select 添加属性multiple就可以多选了,此时v-model绑定的是一个数组,与复选框用法类似。
 实例代码如下:

 div id="app" 
 select v-model="selected" multiple 
 option html /option 
 option value="js" JavaScript /option 
 option css /option 
 /select 
 p 你选择的是:{{selected}} /p 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 selected: ["html", "js"]
 /script 

在业务中, option 经常用v-for动态输出,value和text也是用v-bind来动态输出的。
 例如:

 div id="app" 
 select v-model="selected" 
 option v-for="item in options" :value="item.value" {{item.text}} /option 
 /select 
 p 你选择的是:{{selected}} /p 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 options: [
 {text:"HTML", value:"html"},
 {text:"JavaScript", value:"js"},
 {text:"CSS", value:"css"},
 selected: "html"
 /script 

虽然用选择列表 select 控件可以很简单地完成下拉选择的需求,但是在实际业务中反而不常用,因为它的样式依赖平台和浏览器,无法统一,也不太美观,功能也受限,,比如不支持搜索,所以常见的解决方案是用 div moi一个类似的控件。

 当阅读完第7章组件的内容后,可以尝试编写一个下拉选择器的通用组件。

6.2 绑定值

上一节介绍的单选按钮、复选框和选择列表在单独使用或单选的模式下,v-model绑定的值是一个静态字符串或布尔值。
 但在业务中,有时需要绑定一个动态的数据,这时可以用v-bind来实现。

单选按钮:

 div id="app" 
 input type="radio" v-model="picked" :value="value" 
 label 单选按钮 /label 
 p {{picked}} /p 
 p {{value}} /p 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 picked: false,
 value: 123
 /script 

在选中时,app.picked===app.value,值都是123。

复选框:


 div id="app" 
 input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2" 
 label 复选框 /label 
 p {{toggle}} /p 
 p {{value1}} /p 
 p {{value2}} /p 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 toggle: false,
 value1: "a",
 value2: "b"
 /script 

 勾选时,app.toggle===app.value1;

 未勾选时,app.toggle===app.value2。

选择列表:

 div id="app" 
 select v-model="selected" 
 option :value="{number:123}" 123 /option 
 /select 
 {{selected.number}}
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 selected: ""
 /script 

 当选中时,app.selected是一个Object,所以app.selected.number===123。

6.3 修饰符

与事件的修饰符类似,v-model也有修饰符,用于控制数据同步的时机。

.lazy:

在输入框中,v-model默认是在input事件中同步输入框的数据(除了提示中介绍的中文输入法情况外)。

 使用修饰符.lazy会转变为在change事件中同步,示例代码如下:

 div id="app" 
 input type="text" v-model.lazy="message" 
 p {{message}} /p 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 /script 

 这是,message并不是实时改变的,而是在失焦或按回车时才更新。

.number:

使用修饰符.number可以将输入转换为Number类型,否则虽然你输入的是数字,但它的类型其实是String。
 比如在数字输入框时会比较有用,示例代码如下:

 div id="app" 
 input type="number" v-model.number="message" 
 p {{typeof message}} /p 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 message: 123
 /script 

 .trim:

修饰符.trim可以自动过滤输入的首尾空格,示例代码如下:


 div id="app" 
 input type="text" v-model.trim="message" 
 p {{message}} /p 
 /div 
 script 
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 /script 

 从Vue.js 2.x开始,v-model还可以用于自定义组件,满足定制化的需求,在下一节会介绍。

以上所述是小编给大家介绍的Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服