v-model的原理

v-model 粗略解析

v-model是什么?

  • 双向数据绑定,可以从data流向页面,也可以从页面流向data
  • 通常用于表单收集,v-model 默认绑定 value
  • 书写形式: v-model:value=""v-model

v-model原理是什么?

  • v-model本质是一个语法糖
  • 靠v-bind绑定数据
  • oninput数据传递

v-model实现代码

html 复制代码
<div id="app">
        < <!-- 用e的话在事件名后不需要加上()括号 -->
        我是e方法 <input type="text" :value="val" @input="change">
        <br>
        <!-- 用event的话需要在事件名后加上()括号 -->
        我是event方法 <input type="text" :value="val" @input="change-event()" placeholder="我是event">
        <h1>{{val}}</h1>
</div>
javascript 复制代码
Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return { val: "我是实现原理" }
        },
        methods:{
        	change(e){
        		console.log(e);
        		this.val=e.target.value;
        	},
        	change-event(){
        		console.log(event);
        		this.val=event.target.value;
        	},
        }  
    })

e和event的区别

  • 当定义函数()时,接收e,当为形参
  • e自身是某个事件带有的方法;event是window带有的方法
  • e = window.event 兼容

  • 失联

最后编辑时间 2024,03,13;11:10

相关推荐
用户214118326360217 分钟前
免费玩转 AI 编程!Claude Code Router + Qwen3-Code 实战教程
前端
一枚小小程序员哈18 分钟前
基于Vue + Node能源采购系统的设计与实现/基于express的能源管理系统#node.js
vue.js·node.js·express
小小愿望2 小时前
前端无法获取响应头(如 Content-Disposition)的原因与解决方案
前端·后端
小小愿望2 小时前
项目启功需要添加SKIP_PREFLIGHT_CHECK=true该怎么办?
前端
烛阴2 小时前
精简之道:TypeScript 参数属性 (Parameter Properties) 详解
前端·javascript·typescript
海上彼尚3 小时前
使用 npm-run-all2 简化你的 npm 脚本工作流
前端·npm·node.js
开发者小天3 小时前
为什么 /deep/ 现在不推荐使用?
前端·javascript·node.js
如白驹过隙4 小时前
cloudflare缓存配置
前端·缓存
excel4 小时前
JavaScript 异步编程全解析:Promise、Async/Await 与进阶技巧
前端
Jerry说前后端4 小时前
Android 组件封装实践:从解耦到架构演进
android·前端·架构