表单与-model

126 阅读1分钟

表单输入绑定

input

双向绑定,当更改页面或内从内容,另一个跟着变化。input与textarea基本一致,内容框的变化 双向绑定 (2).png

checkbox

单个复选框,绑定到布尔值 一个选项.png 多个复选框,绑定到同一个数组,:v-bind的缩写,是为了动态绑定数据。 多选.png

radio

单选摁扭 单选.png

select

用 v-for 渲染的动态选项, :v-bind的缩写,是为了动态绑定数据。 for循环.png

form

监听form标签的Submit事件配合button摁钮 form存储数据.png

修饰符

.lazy

适用于副文本编辑器,(不用监听中间的变化,因为input事件太多)这样可以一次性获取副文本内容, 官方文档:在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件_之后_进行同步: lazy.png

.number

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符: number.png 但初始化数据时不能为空 初始化数据.png

.trim

数据两头的空格不要 空白格.png

v-model

作用:

1. 在变量变化的时候ui会变化,用户改变ui时数据也会变化,
2. v-model实际上是V-bind:value和V-on:input的语法糖
原生的:V-on:input="xxx=$event.target.value"
自定义:V-on:input="xxx=$event"