v-
model
的基本用法
一、本节说明
前面的章节我们学习了v-bind指定,可以通过模型
数据
去影响视图。我们都知道
VUE
是支持
双向
数据
绑定
的,那么视图是如何影响
数据
的呢?那就要学到我们这一节的内容v-
model
。v-
model
可以将表单输入
绑定
到对应的模型
数据
。
二、 怎么做
我们通过v-
model
实现
一个简单的需求
通过表单input
绑定
模型
数据
message,表单
数据
变化data.message也发生变化
然后通过Mustache表达式,将变化之后的message
数据
显示到视图页面上
三、 效果
四、 深入
v-
model
实际上是一个语法糖,也就是简写,他实际上包含了
两个
操作:
什么是
双向
数据
绑定
Vue
.
js
是一个MV VM框架, 即
数据
双向
绑定
, 即当
数据
发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,
数据
也会跟着同步变化。这也算是
Vue
.
js
的精髓之处了。
值
得注意的是,我们所说的
数据
双向
绑定
,一定是对于UI控件来说的非UI控件不会涉及到
数据
双向
绑定
。单向
数据
绑定
是使用状态管理工具的前提。如果我们使用
vue
x那么
数据
流也是单项的,这时就会和
双向
数据
绑定
有冲突。
为什么要
实现
数据
的
双向
绑定
在
Vue
.
js
中,如果使用
vue
x, 实际上
数据
还是单向的, 之所以说
v-
model
指令在表单控件元素上创建
双向
数据
绑定
。根据控件类型自动选取正确的
方法
来更新元素。负责监听用户的输入事件以更新
数据
,并对一些极端场景进行一些特殊处理。
注意:v-
model
会忽略所有表单元素的 value、checked、selected属性的初始
值
而总是将
Vue
实例的
数据
作为
数据
来源。应该通过
JavaScript
在组件的 data 选项中声明初始
值
。
运行结果:
修饰符...
是的,单价下的那个输入框我用了
双向
绑定
(比如叫price,比如100)。然后ipnut
键入中文时,(即使我做了输入验证)。回车时虽然框中不会保留中文,但事实上
VUE
的
双向
绑定
已经失效了。不管你后面输入什么,
绑定
的price保存的
值
只会是中文前的那个
值
(100)。
这样就导致 表面好像没事,但是当你提交时就
数据
不对了。
还有一种是、
是日期控件(bootstrap的)的问题,部分控件才会。mmp哦,当lz用这个空间选定日期时。以为美滋滋的一次搞定!
当提交的时候 u才发现
双向
绑定
的变量,压根就是空
值
。。。。
空
值
。。。后来才知道,
双向
绑定