v-model的修饰符
- v-model.lazy 只有在input输入框发生一个blur时才触发
- v-model.trim 将用户输入的前后的空格去掉
- v-model.number 将用户输入的字符串转换成number
(1)input type=text
当使用v-model将input输入框与name绑定那么输入框改变的同时name的值也会同步的发生改变
{ { name }}
但是,这样会对使用有影响,所以我们可以用v-model的修饰符lazy,v-model.lazy 只有在input输入框发生一个blur时才触发
{ { name }}
v-model.trim 将用户输入的前后的空格去掉,我们在输入框中输入很多空格后再输入内容,下面的span还是原来那样的,不会多出空格,原因是HTML只显示一个空格,但是name的值就不一样了,它会将这些空格算上,我们可以在span上加一个pre标签,这时这些空格就会显示出来
{ { name }}
v-model.trim就是用来清除这些多余的空格的,当然如果是密码等输入框,请不要加此修饰,有些用户会用空格做密码。
{ { name }}
这时你无论给它前后加多少空格都会被清除掉。
v-model.number 将用户输入的字符串转换成number { { age }}
这种情况下,你输入的数字会被自动转换成字符串,可以在console中app.age来查看,如果加上.number
{ { age }}
这样就会把你输入的数字转换成number,在console中app.age查看是number类型了。
(2)input type=textarea
v-model在input textarea select中使用,前面我们都是在input的type = text中使用的,在textarea中和它是一样的,唯一区别是这个是多行的。
(3)input type=radio
男:女: { { sex }}
(4)input type=checkbox
男:女: { { sexual_orientation }}
(5)select
{ { from }}
{ { from }}