【无标题】

本文详细解释了Vue中v-model的作用、原理以及它在表单收集中的应用。同时讨论了e方法和event方法的区别,特别是在处理事件时两者如何传递数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

v-model:

v-model是什么?
双向数据绑定,可以从data流向页面,也可以从页面流向data
通常用于表单收集,v-model 默认绑定 value 值
书写形式: v-model:value=“” 或 v-model
v-model原理是什么?
v-model本质是一个语法糖。
靠v-bind绑定数据
oninput数据传递

<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>
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 兼容

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值