接着前面的内容: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. [概率] HDU 2019 Multi-University Training Contest 10 - Valentine's Day

    Valentine's Day Time Limit: 2000/2000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others ...

  2. effective-java学习笔记---使用实例属性替代序数35

    永远不要从枚举的序号中得出与它相关的值; 请将其保存在实例属性中: public enum Ensemble { SOLO(1), DUET(2), TRIO(3), QUARTET(4), QUIN ...

  3. PySpark初级教程——第一步大数据分析(附代码实现)

    概述 数据正以前所未有的速度与日俱增 如何存储.处理和使用这些数据来进行机器学习?spark正可以应对这些问题 了解Spark是什么,它是如何工作的,以及涉及的不同组件是什么 简介 我们正在以前所未有 ...

  4. 深度学习框架Keras与Pytorch对比

    对于许多科学家.工程师和开发人员来说,TensorFlow是他们的第一个深度学习框架.TensorFlow 1.0于2017年2月发布,可以说,它对用户不太友好. 在过去的几年里,两个主要的深度学习库 ...

  5. LeetCode#1047-Remove All Adjacent Duplicates In String-删除字符串中的所有相邻重复项

    一.题目 给出由小写字母组成的字符串 S,重复项删除操作会选择两个相邻且相同的字母,并删除它们. 在 S 上反复执行重复项删除操作,直到无法继续删除. 在完成所有重复项删除操作后返回最终的字符串.答案 ...

  6. [bzoj1029]建筑抢修<贪心>

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1029 解析:这也算bzoj中比较简单的一道题,其实想通了就是非常的简单. 这题用贪心的方式 ...

  7. JavaScipt创建函数的方法

    JavaScipt的函数的定义有三种方式:  一.命名函数定义 1.JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 (). 2.函数名可包含字母.数字.下划线和美 ...

  8. AutoCompleteTextView的简单使用

    1.AutoCompleteTextView功能 自动完成文本框,由EditText派生而来,是一个文本编辑框,相较普通的文本编辑框多了提示功能,即用户输入一定数量的字符后,自动完成文本框会弹出一个下 ...

  9. 1127: 【入门】A类多?B类多?

    1127: [入门]A类多?B类多? 时间限制: 1 Sec 内存限制: 16 MB 提交: 3537 解决: 2406 [提交] [状态] [讨论版] [命题人:外部导入] 题目描述 一个自然数转换 ...

  10. 【Mongodb】聚合查询 && 固定集合

    概述 数据存储是为了可查询,统计.若数据只需存储,不需要查询,这种数据也没有多大价值 本篇介绍Mongodb 聚合查询(Aggregation) 固定集合(Capped Collections) 准备 ...