Vue基础篇 之 v-model 模拟
2024-09-08 11:00:56
我们知道vue中 为简化表单输入 提供了v-model 的语法绑定 将 vue的属性和表单元素进行了双向绑定 大大简化了表单数据操作的数据绑定
那么v-model 是如何实现双向绑定的呢?
今天我们来做个最简单的模拟 照例 先上代码
<body>
<div id="app">
【v-model】
<input type="text" v-model="message">
{{message}}
【模拟】
<input type="text" @input="changeInput" :value="message">
</div>
</body>
<script language="JavaScript">
var vm = new Vue({
el: "#app",
data: {
message: ""
},
methods: {
changeInput: function (e) {
this.message = e.target.value;
}
}
})
//组件化应用构建
</script>
我们知道v-model 与数据绑定后 输入框中的数据改变时,vue的属性也会改变,反之 当vue的属性改变之后,输入框中的值也发生改变
我们进行模拟时就注意这两个方面即可
1.输入vue属性改变 这个通过@input 属性可以实现 当输入框内容改变时 这个方法将会被调用
那么我们可以在这个方法中对vue 属性进行赋值
2.当属性发生改变后 input 内容发生改变 也就是input的 value 属性发生了改变
那么我可以通过 vue属性与input 输入框的value 属性进行绑定就可以实现
最新文章
- 4 我们的第一个c#程序
- Centos环境下部署游戏服务器-软件安装
- 服务器安装Apache+Tomcat+Memcached共享Session的构架设计
- android中广播接收SD卡状态
- pyqt node节点1
- 第一章 andriod studio 安装与环境搭建
- hbase列表排序
- HTML知识点总结之div、section标签
- python学习笔记(11)--词云
- BZOJ4519[Cqoi2016]不同的最小割——最小割树+map
- shadows
- TP5 强制下载PDF
- django 的model是如何把字段加入到meta中的
- Html引入百度富文本编辑器ueditor
- Expm 1_1 实现基于分治法的归并排序算法.
- RNN 网络
- ORM多表操作之创建关联表及添加表记录
- [Golang] struct Tag说明
- [51CTO]区块链在美国:10个案例、10个问题和5个解决方案
- qq划屏幕红包程序
热门文章
- 《深入理解ES6》笔记——扩展对象的功能性(4)
- java中this这个概念初学者非常难理解,请举例说明
- Spring 和 SpringMVC 常用注解和配置(@Autowired、@Resource、@Component、@Repository、@Service、@Controller的区别)
- vue获取验证码倒计时
- 将PHPMailer整合到ThinkPHP 3.2 中实现SMTP发送邮件
- VUE3 之 使用 Mixin 实现代码的复用 - 这个系列的教程通俗易懂,适合新手
- C++STL 中的数值算法(iota、accumulate、adjacent_difference、inner_product、partial_sum)
- 帝国CMS灵动标签调用包含指定短语关键词关键字文章的语法
- 整理display:none;和visibility:hidden;和overflow:hidden;的区别
- 2022-Aech安装(详细)