(编辑:jimmy 日期: 2024/12/24 浏览:2)
一、本节说明
前面的章节我们学习了v-bind指定,可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的,那么视图是如何影响数据的呢?那就要学到我们这一节的内容v-model。v-model可以将表单输入绑定到对应的模型数据。
二、 怎么做
我们通过v-model实现一个简单的需求
通过表单input绑定模型数据message,表单数据变化data.message也发生变化
然后通过Mustache表达式,将变化之后的message数据显示到视图页面上
三、 效果
四、 深入
v-model实际上是一个语法糖,也就是简写,他实际上包含了两个操作:
所以,下面的两种写法实现的效果是一致的。
一、本节说明
在绝大多数的表单操作中,我们不只要收集文本输入的数据,我们还可能用到单选和多选。通常,实现单选和多选有以下的方式:
这一节我们来讲解第一种方式实现的多选,及使用v-model指令数据绑定方法。
二、 怎么做
三、 效果(动态图片)
四、 深入
怎样在单选或者多选选项显示,默认勾选一个或多个选项?只需要给定默认初始化数据即可
浏览器效果:
一、本节说明
上一节我们使用v-model指令,绑定input标签type=radio和type=checkbox,分别实现了单选和多选的视图向模型数据的绑定。这一节我们使用select标签和option标签,结合v-model实现单选和多选的视图向模型数据的绑定。
二、 怎么做
三、 效果(动态图)
一、本节说明
本节我们介绍一下在使用v-model指令进行表单数据绑定的时候,常用的修饰符,修饰符会对指令功能起到补充和增强的作用。
二、 怎么做
三、 效果
作者:字母哥博客
以上就是vue v-model的用法解析的详细内容,更多关于v-model的基本用法的资料请关注其它相关文章!