好资源导航 » 文章资讯 » Vue表单输入绑定的示例代码

Vue表单输入绑定的示例代码

2023-09-06 09:25:04 67

基础用法

你可以用v-model指令在表单input，textarea以及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但是v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据。

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

(1)文本

(2)多行文本

(3)复选框

单个复选框，绑定到布尔值：

多个复选框，绑定到同一个数组：



Jack

John

Mike


Checkednames:{{checkedNames}}

newVue({ el:'#example-3', data:{ checkedNames:[] } })

(4)单选按钮



One



Two


Picked:{{picked}}

newVue({ el:'#example-4', data:{ picked:'' } })

(5)选择框

单选时：



请选择




Selected:{{selected}}

newVue({ el:'...', data:{ selected:'' } })

如果v-model表达式的初始值未能匹配任何选项，
Selected:{{selected}}

newVue({ el:'#example-6', data:{ selected:[] } })

值绑定

对于单选按钮，复选框以及选择框的选项，v-model绑定的值通常是静态字符串(对于复选框也可以是布尔值)：

ABC

(1)复选框

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

(2)单选按钮


//当选中时
vm.pick===vm.a

修饰符

(1).lazy

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步(除了上述输入法组合文字时)。你可以添加lazy修饰符，从而转变为使用change事件进行同步：

(2).number

如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符

(3)trim

如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符：

示例：

//>>>>>>>html



massageis:{{massage}}


单个选框绑定，返回值为布尔值:



数据:{{radioStatus}}




多个选框绑定同一个数据:

Jack

John

Mike



数据:{{checkedNames}}



单选按钮数据:
{{stantic.garder[1]}}
{{stantic.garder[2]}}
{{stantic.garder[3]}}



性别代码:{{sex}}；性别：{{stantic.garder[sex]}}



选择列表:

请选择
北京
天津
上海

Selected:{{selected}}



值绑定：

对于单选按钮，勾选框及选择列表选项，v-model绑定的value通常是静态字符串(对于勾选框是逻辑值)：


但是有时我们想绑定value到Vue实例的一个动态属性上，这时可以用v-bind实现，并且这个属性的值可以不是字符串。



是否毕业：


您选择了：{{toggle}}

选择列表的值绑定字面量对象:


123
456
789

vm.selected={{selected2}}



修饰符

.lazy
在默认情况下，v-model在input事件中同步输入框的值与数据(除了上述IME部分)，但你可以添加一个修饰符lazy，从而转变为在change事件中同步：

输入完成，信息改变：{{massage}}

.number
如果想自动将用户的输入值转为Number类型(如果原值的转换结果为NaN则返回原值)，可以添加一个修饰符number给v-model来处理输入值：


类型为：{{typeofage}}

.trim
如果要自动过滤用户输入的首尾空格，可以添加trim修饰符到v-model上过滤输入：

//>>>>>>js //基础用法v-model letvm=newVue({ el:'#app', data:{ massage:'', radioStatus:false, checkedNames:[], sex:'', age:'', toggle:'', selected:'', selected2:'', stantic:{ garder:{ 1:'男', 2:'女', 3:'不确定' }, Hobbies:{ 1:'电影', 2:'美食', 3:'游戏', 4:'科技' }, isOrNot:{ 1:'是', 0:'否' } } } });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

Vue表单输入绑定的示例代码

值绑定：

选择列表的值绑定字面量对象:

修饰符

.lazy

.number

.trim

热门推荐

随机推荐