Vue中@input用法以及v-model示例

2023-10-29

<input :value="value" @input="updateValue" placeholder="edit me">

@input是input框中的值变化时触发的函数。
以下示例是:input内容变化时,下面的内容也跟着变化。

<div id="app">
	    <com v-model="message"></com>
	    <p>Message is: {{ message }}</p>
	</div>
	<script>
	    var app = new Vue({
	        el: '#app',
	        data: {
	            message: ''
	        },
	        components: {
	            com:  {
	                props: ['value'],
	                template: '<input :value="value" @input="updateValue" placeholder="edit me">',
	                methods: {
	                    updateValue: function (e) {
	                        this.$emit('input', e.target.value);
	                    }
	                }
	            }
	        },
	        methods: {
	        }
	    })  
    </script>

效果为:
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue中@input用法以及v-model示例 的相关文章

  • ReactJs实现树形结构的数据显示的组件

    1 该组件树形显示数据 2 组件中数据的请求方式为fetch方式 3 点击对应的数据前面的小三角 fetch请求改数据下对应的子数据 并展开该节点 4 将该组件的js less文件放到kpiTree目录下 在kpiTree目录下创建imag
  • Vue 路由

    1 vue router的理解 vue router是vue的一个插件 专门用来实现SPA应用 SPA也就是单页Web应用 特点是 整个应 用只有一个完整的页面 点击页面中的导航链接不会刷新页面 只会做页面的局部更新 数据需要 通过ajax
  • printf打印浮点数,%e %f %g的区别

    打印浮点数有 e f g三种格式 它们的区别如下 e 以科学计数法表示 小数点左边只有一位 小数点右边保留6位 过长则截去 不够则补零 接着是符号e 再接着就是10的多少次幂 f 要求小数点右边保留6位 过长则截去 不够则补零 g 没有上面
  • pandas学习笔记—agg()函数详解

    目录 1 agg 函数定义 2 举例 2 1 简单的列或行统计 2 2 自定义统计函数 2 3 先groupby 再agg 1 agg 函数定义 agg 函数是聚合函数 DataFrame agg func axis 0 args kwar
  • sprintf格式化字符串

    可以利用sprintf对字符串进行格式化 sprintf 目标字符串 格式 占位参数 格式化字符串 void test01 char buf 1024 memset buf 0 1024 sprintf buf 今天是 d年 d月 d 日
  • Failed to start docker.service: Unit not found(Docker服务起不来)

    原文https blog csdn net qq 34508530 article details 84989990 linux部署Docker出现 Failed to start docker service Unit not found
  • 多种方案教你实现iframe嵌套页面相互传参(父子通信)

    文章目录 需求描述 开始上手 上代码 父向子传值 方法一 通过URL传参 方法二 通过window postMessage 方法 注意事项 子向父传值 方法一 通过通过全局变量方式处理 方法二 通过通过window parent postM
  • DVWA-BruteFoce高级安全

    DVWA security high GET包结构 比起来之前low medium等级 可以看到这里多了一个参数 user token 为了防止重放攻击 但是明显能看出来user token就是用户输入密码的md5形式 直接用burpsut
  • 用ChatGPT生成openAI全景报告

    云孚科技基于业内领先的自然语言处理 知识图谱 语义匹配 智能写作等技术 打造了云孚开源情报系统YFINT 并结合ChatGPT模型成果 重磅推出OpenAI调研报告 ChatGPT简介 2022年11月30日 总部位于旧金山的OpenAI推
  • 【13届蓝桥杯复盘】九进制转十进制 顺子日期

    问题描述 九进制正整数 2022 下标9 转换成十进制等于多少 方法 权值展开 2 93 2 9 2 9 0 1478 如果 一定要用代码来实现 C 代码如下所示 include
  • python+selenium实现cookie登录,并抓取指定类class下的html内容

    个人研究学习研究用 1 首先通过链接手动登录 https www educity cn 获取cookie信息 2 再使用站点cookie登录 跳转到https uc educity cn tiku testReport html id 80
  • Hadoop组件的一些总结

    前言 Hadoop是一个由Apache基金会所开发的分布式系统基础架构 用户可以在不了解分布式底层细节的情况下 开发分布式程序 充分利用集群的威力进行高速运算和存储 提示 以下是本篇文章正文内容 下面案例可供参考 一 Hadoop的组成 H
  • [转]为什么未来不需要我们?

    为什么未来不需要我们 在21世纪 我们威力无比的三种科技 机器人 基因工程和纳米技术正在使人类成为濒危物种 作者 比尔 乔伊 自从我从事科技创造的那一刻起 我就关注其在伦理上的问题 但直到1998年秋天我才认识到我们在21世纪面临着多大的危
  • python3+flask 开发web(一)

    1 环境准备 1 安装Python https www python org 2 安装python ide pycharm https www jetbrains com pycharm 3 安装flask 安装好了python 电脑就自动
  • 如何使用gdb调试java虚拟机_GDB入门教程之如何使用GDB启动调试

    GDB The GNU Project Debugger 是 Linux 系统下调试 C 和 C 程序的主要神兵 Vim教程网 https vimjc com 介绍多种方式下使用 GDB 启动进程调试的方法和命令 要使得 C 和 C 程序能
  • varchar和char的区别

    1 char n 和varchar n 中括号中n代表字符的个数 并不代表字节个数 所以当使用了中文的时候 UTF8 意味着可以插入m个中文 但是实际会占用m 3个字节 即 n限制了存储多长的值 但是所占用的空间大小不一致 例如varcha
  • 使用 Amazon Rekognition API 进行文本检测和 OCR

    使用 Amazon Rekognition API 进行文本检测和 OCR 这篇博客将介绍如何 使用Amazon Rekognition API 进行文本检测和 OCR 包括如何创建 Amazon Rekognition密钥 安装boto3
  • Java 中的集合框架有哪些?(十四)

    Java 中的集合框架包含了各种不同类型的集合和数据结构 用于存储和处理数据 这些集合和数据结构可以提高程序的性能和可读性 并且可以方便的进行数据操作和算法实现 本文将介绍 Java 中的集合框架 以及各种不同类型的集合和数据结构 Java
  • Vue父子组件传值---- $listeners子传父的父

    最近在写vue子组件给父组件传值时 一不小心写了五个组件 这个时候用到了子组件给父组件传值 其中不乏子组件跨过它的父组件 给它的父组件的父组件传值 也就是给它的爷爷传值 听到这里是不是快晕了 来 上干货 这是demo1 也是最底层的子组件
  • JavaSE - 集合类-单列集合框架

    JavaSE 集合类 单列集合框架 本节学习目标 了解Java单列集合框架结构 了解并掌握Collection接口及其方法 了解并掌握List集合 接口 及其方法 了解并掌握Set集合 接口 及其方法 了解并掌握Queue集合 接口 及其方

随机推荐

  • 【Hexo github】进行SSH认证时报错git操作提示git@github.com: Permission denied (publickey)(已解决)

    进入git bash界面然后 SSH keys 1 git config global list 2 git config global user name yourname git config global user email ema
  • Vue3+swiper5 异步请求数据后轮播图出现无分页器小圆点和无法滑动的问题,如果有默认图片则从最后一张切换到第一张时会展示默认图片

    一 场景描述 异步请求获取到11张图片 页面播图无分页器小圆点和无法正常滑动 package json devDependencies vue cli plugin babel 4 5 13 vue cli plugin router 4
  • 30,31-添加类功能视图

    这节分两部分 一 如何将代码从关卡蓝图转到类蓝图中 二 如何在类蓝图中切换灯光 1 通过判断和灯的距离切换灯光 2 通过文本提示切换灯光 先看第一个问题 如何将代码从关卡蓝图转到类蓝图中 其实这个很好理解 关卡蓝图相当于main 函数 关卡
  • Springboot + MySQL+ JPA Ⅳ find自带方法详解

    find是CRUD中的R 是使用得最多的方法 此篇先整理下自带的find方法 不需要在dao层写对应接口 后续会整理下拓展方法 一 getById 通过id进行单个查询 跟findById差不多 返回值类型不一样 service层 Tran
  • sqli-labs: Less 21-65 通关教程

    第二十一关 cookie注入 YOUR COOKIE uname RHVtYg and expires Sat 16 Jul 2016 08 32 26 注 RHVtYg 是 Dumb 经Base64加密后的值 和上关又是差不多 base6
  • python匹配ip地址

    ip地址是用3个 号作为分隔符 分割4个数字 每个数字的取值在 0 255 一般日志文件中的ip地址都是有效的ip地址 不需要我们再去验证 因此 若从日志文件中提取ip 那么可以简单写成这样 gt gt gt import re gt gt
  • unity2022.1.8之后版本的新的输入行为控制对象变化

    文章目录 unity2022 1 8之后版本的新的输入行为控制对象变化 怎么导入 如何使用 unity2022 1 8之后版本的新的输入行为控制对象变化 我们先了解大概的逻辑 我们要设置触发行为的方式并且让他和对象的行为绑定 再将行为和对象
  • A complete log of this run can be found in

    安装element ui时遇到的问题 解决方法 接下来测试一下 问题解决
  • 使用OpenCV的GrabCut算法去除图像背景

    使用OpenCV的GrabCut算法去除图像背景 图像分割是计算机视觉中的重要任务之一 它可以将图像分割成不同的区域 并对这些区域进行进一步的分析和处理 其中一种常用的图像分割方法是GrabCut算法 它是一种基于图割的迭代算法 可以有效地
  • 对象引用与对象存放的地址和区别

    在java的学习当中 很多时候并没有能很好分清把对象和对象的引用 如果没能很好认识分清这两者的关系 就可能会很难理解一些指针的移动的代码 JAVA基本类型的变量的时其变量名及值 变量名及值是两个概念 是放在方法栈中 引用类型所声明的变量 该
  • 【mySQL】C++ 操作mySQL

    目录 通过mySQL 库 简介 安装和配置 linux环境 WIN32环境 C 调用mysql 通过Mysql connector c 库 前言 Connector C 使用 3 4 静态库和动态库 动态库 创建项目和配置 代码编写 使用中
  • C51定时器与计数器(学习笔记)

    1 什么是定时器与计数器 1 定时器与计数器都是soc当中的一个内部外设 计数器顾名思义是用来计数的 就和我们的秒表一样 假如定时20秒 当我们按下秒表开始计数时 数秒的过程就是计数 计时器 当秒表数到20时 定时器 就自动暂停 2 工作模
  • Redis系列--新数据类型详解

    一 Bitmaps 一 简介 计算机存储数据时 都是以二进制位表示 Redis提供了Bitmaps这个 数据类型 可以实现对位的操作 1 Bitmaps本身不是一种数据类型 实际上它就是字符串 key value 但是它可以对字符串的位进行
  • matlab 将深度图像转换为点云

    目录 一 功能概述 1 算法概述 2 主要函数 3 参考文献 二 代码实现 三 结果展示 1 深度图像 2 彩色图像 3 生成点云 四 参考链接 一 功能概述 1 算法概述 深度相机能够获取物体到相机的距离信息 可以根据距离信息 计算像素的
  • 递归调用之迷宫问题

    我们假设数字1表示墙 数字0表示可以走 那么就可以用一个二维数组来模拟一个迷宫 并可以用递归调用来求解路线 下面的代码是用Java模拟的一个迷宫 代码很简单 public class MiGong public static void ma
  • button标签的onclick事件

    1 普通的button标签定义onclick事件 1 无参
  • delphi 10.3 FastReport 多设备跨平台 打印之解决方法

    以下能WINDOWS10 DELPHI 10 3 FastReport6 0上顺利通过 基础知识点 需掌握 https blog csdn net qq 25439957 article details 87110559 FastRepor
  • Java天地 学习探讨Java Spring中使用classpath加载配置文件浅析

    Spring中使用classpath加载配置文件浅析 如果您感觉可以请提出您宝贵的意见 在应用Spring的工程中 使用class path的方式加载配置文件应该是最常用的做法 然而对大部分人来说 刚开始使用Spring时 几乎都碰到过加载
  • 免费搜索引擎登录入口

    百度免费登录入口 http www baidu com search url submit htm 新浪免费登录入口 http bizsite sina com cn newbizsite docc index 2jifu 09 htm 搜
  • Vue中@input用法以及v-model示例