接着前面的内容:https://www.cnblogs.com/yanggb/p/12586416.html

表单的输入绑定

表单的输入绑定是一块很重要的内容,因为所有的业务系统都离不开基础表单的录入功能,因此要特别认真仔细地掌握其中的相关知识点。

基础用法

你可以使用【v-model】指令在表单<input>、<textarea>以及<select>元素上创建双向数据绑定,它会根据控件(元素)的类型自动选取正确的方式来更新元素。尽管看起来有些神奇,但是【v-model】实际上不过是语法糖(将复杂的语法整合成简单的语法),它负责监听用户的输入事件以更新数据,并对一些极端的场景进行一些特殊的处理。

v-model会忽略所有表单元素的value、checked和selected属性的初始值,而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。

在了解v-model的之前,要特别记住官方文档上的这句话,开发的过程中很多的问题都和这个注意事项有关系。

事实上,【v-model】指令在内部为不同的输入元素使用了不同的属性并抛出不同的事件:

1.text和textarea元素使用value属性和input事件。

2.checkbox和radio使用checked属性和change事件。

3.select字段将value作为prop并将change作为事件。

另外要注意的一点是,对于需要使用输入法(如中文、日文或者韩文等)的语言,【v-model】指令并不会在输入法组合文字的过程中得到更新。如果你想要处理这个过程的话,请使用【input】事件。

文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

这里要注意,与原生的<textarea>的使用不同,在文本区域插值(<textarea>{{text}}</textarea>)并不会生效,必须要使用【v-model】指令来代替。

复选框

单个复选框,绑定到布尔值:

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多个复选框,绑定到同一个数组:

<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})

在页面上勾选的值,就会将value的值作为单个元素被添加到数组中,比如在页面上勾选了Jack和John,那么数组的值就会是["Jack", "John"]。同样的,去除勾选,也会从数组中移除相应value的元素。此外,如果你需要默认值的话,只需要在初始化数组的时候添加相应的勾选值元素即可。

单选按钮

<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
new Vue({
el: '#example-4',
data: {
picked: ''
}
})

下拉选择框

单选时:

<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '...',
data: {
selected: ''
}
})

这里要注意,如果【v-model】指令中绑定的表达式的初始值未能匹配任何选项,<select>元素就会被渲染成【未选中】的状态。这样的状态在ios中会使用户无法选择第一个选项,因为在这种情况下ios不会去触发change事件。因此一般是建议像上面的例子一样提供一个值为空的禁用选项。

多选时(绑定到一个数组):

<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#example-6',
data: {
selected: []
}
})

需要按住键盘上的shift进行多选,和前面的复选框一样,选中的项的value值会被被作为元素添加到数组中,反之则会被从数组中移除。

使用【v-for】指令渲染动态选项:

<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})

注意到了吗,这里没有使用【v-model】指令,而是使用的【v-bind:value】指令,因为这里绑定的是对象的某个动态属性。

值绑定

对于单选按钮、复选框以及选择框的选项,【v-model】指令绑定的值通常是静态字符串(对于复选框也可以是布尔值):

<!-- 当选中时,picked为字符串"a" -->
<input type="radio" v-model="picked" value="a"> <!-- toggle为true或false -->
<input type="checkbox" v-model="toggle"> <!-- 当选中第一个选项时,selected为字符串"abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>

但是有的时候我们可能想要把值绑定到vue实例的一个动态属性上,这个时候就可以使用【v-bind】指令实现,并且这个属性的值可以不是字符串。

值绑定-复选框

<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no">
// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'

这里的true-value和false-value属性并不会影响输入控件的value属性,因为浏览器在提交表单的时候并不会包含未被选中的复选框。如果要确保表单中的这两个值中的一个能够被提交(比如yes或者no),请换用单选按钮。

值绑定-单选按钮

<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a

值绑定-下拉选择框的选项

<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时
typeof vm.selected // 'object'
vm.selected.number //

官方文档中关于下拉选择框<select>的例子都是使用的【v-bind:value】指令,可以视作下拉选择框对【v-model】的支持并不好。

修饰符【.lazy】

在默认的情况下,【v-model】指令在每次input事件触发之后都会将输入框的值与数据进行同步(除了上述输入法组合文字的时候)。如果你想要在整体输入完成之后再触发数据同步的话,可以使用【.lazy】修饰符手动转变为使用change事件。

<!-- 在change时而非input时更新 -->
<input v-model.lazy="msg" >

修饰符【.nubmer】

如果你想要自动将用户的输入值转为数值类型的话,可以给【v-model】指令添加【.number】修饰符。

<input v-model.number="age" type="number">

这个修饰符通常是很有用的,因为即使是在【type="number"】的时候,html输入元素的值也总会返回字符串。如果这个值无法被parseFloat()函数解析的话,就会返回原始的值。

修饰符【.trim】

如果你想要自动过滤用户输入的首尾空白字符,可以给【v-model】指令添加【.trim】修饰符。

<input v-model.trim="msg">

在组件上使用【v-model】指令

html原生的输入元素类型并不总能满足需求,因此vue的组件系统允许开发者创建具有完全自定义行为且可复用的输入组件。这些组件甚至可以和【v-model】一起使用。

这一方面的知识将在学习组件的时候会涉及到,这里先知道可以在组件上使用【v-model】指令即可。

"我还是很喜欢你,像纵然苦涩尝尽,甘之若饴。"

vue2.x学习笔记(十一)的更多相关文章

  1. vue2.0学习笔记之路由(二)路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue2.0学习笔记之路由(二)路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. python3.4学习笔记(十一) 列表、数组实例

    python3.4学习笔记(十一) 列表.数组实例 #python列表,数组类型要相同,python不需要指定数据类型,可以把各种类型打包进去#python列表可以包含整数,浮点数,字符串,对象#创建 ...

  4. Go语言学习笔记十一: 切片(slice)

    Go语言学习笔记十一: 切片(slice) 切片这个概念我是从python语言中学到的,当时感觉这个东西真的比较好用.不像java语言写起来就比较繁琐.不过我觉得未来java语法也会支持的. 定义切片 ...

  5. JavaScript权威设计--JavaScript函数(简要学习笔记十一)

    1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScri ...

  6. SharpGL学习笔记(十一) 光源创建的综合例子:光源参数可调节的测试场景

    灯光的测试例子:光源参数可以调节的测试场景 先看一下测试场景和效果. 场景中可以切换视图, 以方便观察三维体和灯光的位置.环境光,漫射光,镜面反射光都可以在四种颜色间切换. 灯光位置和摄像机位置(Lo ...

  7. vue2.x学习笔记(三十一)

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12683075.html. 安全 现在的企业都比较在意信息系统的安全问题,在使用vue的过程中也要注意这一点. 报告 ...

  8. vue2.x学习笔记(二十一)

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12632730.html. 可复用性&结合-混入 基础 混入(mixin)提供了一种非常灵活的方式,来分发v ...

  9. Vue2.0学习笔记一 :各种表达式

    #,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性:     #,过滤器可以串联 {{ message | filterA | ...

随机推荐

  1. Hive常用命令及作用

    1-创建表 -- 内部表 create table aa(col1 string,col2 int) partitioned by(statdate int) ROW FORMAT DELIMITED ...

  2. ReentrantLock源码解析——虽众但写

    在看这篇文章时,笔者默认你已经看过AQS或者已经初步的了解AQS的内部过程.   先简单介绍一下ReentantLock,跟synchronized相同,是可重入的重量级锁.但是其用法则相当不同,首先 ...

  3. nodejs 模块加载顺序

    nodejs 模块加载顺序 一.当引入模块的形式是 require('lt') 时(1).先找当前文件夹下的node_modules文件夹下的lt文件夹下的package.json 文件指定的main ...

  4. iOS 设备尺寸与系统信息

    参考 http://blog.csdn.net/newbieprogrammer/article/details/50569384 http://blog.csdn.net/developer_zha ...

  5. 深入理解NIO(四)—— epoll的实现原理

    深入理解NIO(四)—— epoll的实现原理 本文链接:https://www.cnblogs.com/fatmanhappycode/p/12362423.html 终于来到最后了,万里长征只差最 ...

  6. SpringBoot环境搭建及第一个程序运行(详细!)

    spring boot简介 spring boot框架抛弃了繁琐的xml配置过程,采用大量的默认配置简化我们的开发过程. 所以采用Spring boot可以非常容易和快速地创建基于Spring 框架的 ...

  7. java web综合案例

    1.采用的技术: bootstrap+jsp+servlet+三层架构(servlet,service,dao)+mysql 注意:mysql使用的是5.5版本,使用高版本会有很多问题.可以将5.5版 ...

  8. 宝塔phpmyadmin可能问题及解决方法

    1. 端口问题检查宝塔phpmyadmin的默认端口888是否放行,和在服务器的安全组规则有没有添加888端口 2.phpmyadmin的php版本问题 在phpmyadmin的设置里的版本选择php ...

  9. 为何关键字static在面试中频频被问?

    关键字static的神奇妙用在今天的学习中,我了解到关键字static的作用,下面我来给大家分享一下.①static 修饰局部变量只改变了变量的生命周期,让静态局部变量出了作用域依然存在,到程序结束生 ...

  10. xmind转为markdown

    先将xmind导出为.opml 将opml导入Typora (需要安装pandoc)