Vue基础篇 之 v-model 模拟
我们知道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 属性进行绑定就可以实现
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现