表单

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

自由学三年,把想法变成现实。33 折优惠(最后 6 天), 现在订阅 →

先在应用的数据里添加一个数据 ... 名字是 message,让它等于 hello ... 再回到 html ,添加一个包装元素 ... 然后在它的里面添加一个文本框 ...

我们可以把应用里的某个数据绑定到这个文本框的里面,可以使用 v-bind 这个指令,绑定的是元素的 value 属性 ... 它的值就是应用里的这个 message ..

在上面我们可以再把这个 message 绑定到一个地方显示出来 .. 添加一个包装 ... 在它的里面绑定一个 message ...

回到浏览器 ... 你会发现,这个文本框里的内容就是应用里的 message 的值 ...

修改一下文本框里的内容 ... 不会影响 message 的值 ... 再找到这个 input 元素,我们再给它绑定一个事件,用的是 v-on 指令,事件的名字是 input .. 然后让 message 的值,等于发生这个事件的目标的值 ... 也就是在文本框里输入的内容 ..

这个 $event 表示的应该就是事件对象 .. 它下面的 target 对象的 value 属性,就是文本框里输入的内容 ..

再去预览一下 .. 在文本框里输入点内容 ... 会改变 message 的值 ...

这种用法还有一种语法糖,我们可以直接用一个 v-model ... 绑定一个 message ...

修改文本框里的内容 ... 同样会影响绑定给它的原始数据 ...

表单《 Vue.js 前端框架 》

统计

10670
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点