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

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

1.v-model

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

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


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

输入的内容是： 

	{{ message }}

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


	篮球足球排球
	
		{{hobby}}


	OneTwoPicked: {{ picked }} 

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

单选时：


	请选择ABCSelected: {{ selected }} 

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

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


	ABCSelected: {{ selected }}

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


	{{hobby}}
	
		{{testHobby}}

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

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

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

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

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

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

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

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。