首页 > 其他分享 > Vue3中v-model的基础使用

Vue3中v-model的基础使用

时间:2022-09-28 09:57:53浏览次数:56  
标签:写法 绑定 基础 update Vue3 model modelValue

v-model绑定的不再是value,而是modelValue,接收的方法也不再是input,而是update:modelValue。使用方法如下:

<ChildComponent v-model = "title">

它是下面这种写法的简写:

<ChildComponent :modelValue = "title" @update:modelValue = "title = $event">

在子组件中写法是:

export default defineComponent({
    name:"ValidateInput",
    props:{
        modelValue:String,   // v-model绑定的属性值
    },
    setup(){
        const updateValue = (e: KeyboardEvent) => {
          context.emit("update:modelValue",targetValue);   // 传递的方法
        }
    }
}

标签:写法,绑定,基础,update,Vue3,model,modelValue
From: https://www.cnblogs.com/HaruhiSuzumiya/p/16736969.html

相关文章

  • 前端基础面试题
    1.前端如何进行性能优化?前端进行性能优化的方案很多,这里只列举部分。在实际应用中不要贪多,想着都用上,要对网站的主要用户群体进行针对性优化。降低请求量合并资源,......
  • CSS基础(基于黑马程序员视频的学习笔记)
    一、CSS选择器1、标签选择器选中所有的该标签标签名{CSS属性名:属性值;}2、类选择器.类名{CSS属性名:属性值;}所有标签都有class属性,class属性的属......
  • 软件测试基础
    软件是控制计算机硬件工作的工具  软件产生过程:1.需求产生(需求方、产品经理)2.需求文档(产品经理)3.设计效果图(UI设计师)4.产品开发(研发人员)5.产品测试(测试人员)6.......
  • drf之模型类序列化器ModelSerialize
    序列化常用字段charFieldBooleanFieldIntegerFieldDecimaField#ListField:{name:'summer',hobby:[1,2,3,4]}#DictField:{nane:'summer',wife:{'name':'哈哈哈'}}......
  • 前端三件套 HTML+CSS+JS基础知识内容笔记
    HTML基础目录HTML基础HTML5标签doctype标签html标签head标签meta标签title标签body标签文本和超链接标签标题标签段落标签换行标签水平标签强调标签图片标签与超链接标签......
  • Serializer序列化与ModelSerializer序列化
    Serializer序列化与ModelSerializer序列化序列化类高级用法之cource,修改序列化字段名字用法一使用cource的时候,字段参数可以指定序列化哪个参数,如果指定别人的字段那......
  • C++语言程序设计基础 内联函数
    C++内联函数是通常与类一起使用。如果一个函数是内联的,那么在编译时,编译器会把该函数的代码副本放置在每个调用该函数的地方。对内联函数进行任何修改,都需要重新编译函数......
  • 序列化类常用字段类和字段参数、序列化类高级用法之source、序列化类高级用法之定制序
    目录序列化类常用字段和字段参数常用字段类需要记住的字段类常用字段参数序列化类高级用法之source,修改序列化字段名字序列化类高级用法之定制序列化字段的俩种方式方式一......
  • js循环数组各种方法array 汇总-基础
    js循环数组各种方法array汇总-基础这几天做系统,又用到多维数组循环交叉。所以总结一套以供参考记录1.varmyStringArray=["Hello","World"];2.......
  • salesforce零基础学习(一百一十九)In-App Guidance实现引导页操作功能
    本篇参考:https://help.salesforce.com/s/articleView?id=sf.customhelp_lexguid.htm&type=5https://developer.salesforce.com/docs/atlas.en-us.api_meta.meta/api_meta......