好资源导航 » 文章资讯 » Vue学习笔记之表单输入控件绑定

Vue学习笔记之表单输入控件绑定

2023-09-25 07:27:05 57

表单输入绑定

基础用法

文本

###多行文本

###复选框

爱好




{{checked}}

varvm=newVue({
el:'#app',
date:{
checked:[]
},

单选按钮

性别

男
女
{{picked}}

varvm=newVue({
el:'#app',
date:{
picked:''
},

选择列表

单选列表

户口


请选择




{{selected}}

varvm=newVue({
el:'#app',
date:{
selected:'',
},

多选列表（绑定到一个数组）：









Selected:{{selected}}

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

绑定value

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

ABC

复选框



//当选中时
vm.toggle===vm.a
//当没有选中时
vm.toggle===vm.b

单选按钮



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

选择列表设置



123


//当选中时
typeofvm.selected//=>'object'
vm.selected.number//=>123

修饰符

.lazy

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

{{msg}}

.number

如果想自动将用户的输入值转为Number类型,可以添加一个修饰符number给v-model来处理输入值：

{{num1}}

{{num2}}


{{num1+num2}}

varvm=newVue({
date:{
num1:1,
num2:1
},
});

.trim

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

{{msg}}

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