Vue表单输入绑定v-model的操作是什么，能解决什么问题

在这篇文章中，我们来学习一下“Vue表单输入绑定v-model的操作是什么，能解决什么问题”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

1.v-model

v-model指定可以实现表单值与属性的双向绑定。即表单元素中更改了值会自动的更新属性中的值，属性中的值更新了会自动更新表单中的值

2.绑定的属性和事件

v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：

1.text和textarea元素使用value属性和input事件。 2.checkbox和radio使用checked属性和change事件。 3.select字段将value作为prop并将change作为事件。

3.表单元素绑定

3.1 input绑定

	输入的内容是：{{ message }}

3.2 textarea绑定

输入的内容是： 

	{{ message }}

3.3 checkbox绑定

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

	篮球足球排球
	

		{{hobby}}
	

3.4 radio绑定

	OneTwoPicked: {{ picked }} 

new Vue({
  el: '#app',
  data: {
    picked: ''
  }
})
 

3.5 select绑定

单选时：

	请选择ABCSelected: {{ selected }} 

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

多选时，只需加上multiple属性即可

	ABCSelected: {{ selected }} 

4.值绑定

对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串 (对于复选框也可以是布尔值)
但是有时我们可能想把值绑定到Vue实例的一个动态property上，这时可以用v-bind实现，并且这个property的值可以不是字符串。

	{{hobby}}
	

		{{testHobby}}
	

4.1 代码详解

1.我们在data中创建了hobbies数组，这里是为了模拟后端返回的数据，数据是动态的 2.又定义了数组testHobby，这是将复选框中的数据与它进行绑定，只要勾选了复选框中的数据，就会将其添加到testHobby中 3.使用了for循环，将hobbies数据中的数据遍历出来 4.input标签中绑定了id属性，value属性，值为遍历出来的数据，之后打开网页源码中可以看到 5.v-model将input标签与testHobby绑定

最后我们查看下绑定的效果，与绑定后的网页源码

我们可以看到绑定后id和value的值都是遍历后的hobby

5.修饰符

5.1 .lazy

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步 。你可以添加lazy修饰符，从而只有按下回车键或者失去焦点时，值才会发生变化：

5.2 .number

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

这通常很有用，因为即使在type="number"时，HTML输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析，则会返回原始的值。

5.3 .trim

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

现在大家对于Vue表单输入绑定v-model的操作是什么，能解决什么问题的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注博信，博信将为大家推送更多相关的文章。