vue 中使用 v-bind 与 v-on 来实现 v-model 双向绑定 ?

Vue — 使用v-bind与v-on实现v-model

v-model其实是一个语法糖,他的背后本质包含两个操作: 1.v-bind绑定一个value属性 2.v-on指令给当前元素绑定input事件

实现步骤如下: ① 通过v-bind实现,若修改app.message,则使得网页显示的input中的value也发生改变。

<body>
<div id="app">
  <input type="text" :value='message'>
  <h2>{{message}}</h2>
</div>

<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message:'你好!',
      }
  })
</script>
</body>

② 通过v-on实现,若通过键入input,则修改app.message的值。

<body>
<div id="app">
  <input type="text" :value='message' @input='valueChange'>
  <h2>{{message}}</h2>
</div>
<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message:'你好!',
      },
      methods:{
          valueChange(event){
              app.message = event.target.value; 
          }
      }
  })
</script>
</body>

③ 更简单的书写方式实现v-on 根本不用绑定方法

<body>
<div id="app">
  <!-- 更简单的书写方式——根本不用绑定方法 -->
  <input type="text" :value = 'message' @input='message = $event.target.value'>

  <h2>{{message}}</h2>
</div>
<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message:'你好!',
      }
  })
</script>
</body>

全部代码:

<body>
<div id="app">
  <!-- v-model其实是一个语法糖,他的背后本质包含两个操作:
      1.v-bind绑定一个value属性
      2.v-on指令给当前元素绑定input事件 -->
  <!-- <input type="text" v-model = 'message'> -->

  <!-- 上面语句 等同于 下面的连写 -->
  <!-- 利用 v-bind: 和v-on: 即可实现 -->
  <input type="text" :value='message' @input='valueChange'>

  <!-- 更简单的方法——根本不用绑定方法 -->
  <input type="text" :value = 'message' @input='message = $event.target.value'>

  <h2>{{message}}</h2>
</div>

<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message:'你好!',
      },
      methods:{
          valueChange(event){
              app.message = event.target.value; 
          }
      }
  })
</script>
</body>

总结: 以下两种方式是等同的

<input type="text" v-model = 'message'>
<input type="text" :value = 'message' @input='message = $event.target.value'>
本文转载于网络 如有侵权请联系删除

相关文章

  • 04-React路由5版本(高亮, 嵌套, 参数传递... )

    React-Router-Dom(路由版本[5])简介React的一个插件库用于实现SPA应用基于React的项目基本都用API<BrowserRouter><HashRouter><Route><Redirect><Link><NavLink><Switch>其它history对象match对象withRouter函数添加依赖yarnaddreact-router-dom@5复制使用BrowserRouter+Link+Routeimport{Link,BrowserRouter,Route}from'react-router-dom' //需要在最外面包裹一个路由管理器也可以包在index.js的app组件外面 <BrowserRouter> <divstyle={{textAlign:'center'}}> <div> {/*定义导航连接*/} <Linkto="/home">Home<

  • 快速学习-Mycat 性能测试指南

    Mycat性能测试指南Mycat自身提供了一套基准性能测试工具,这套工具可以用于性能测试、疲劳测试等,包括分片表插入性能测试、分片表查询性能测试、更新性能测试、全局表插入性能测试等基准测试工具。这里需要说明的一点是,分片表的性能测试不同于普通单表,因为它的数据是分布在几个Datahost上的,因此插入和查询,都必需要特定的工具,才能做到多个节点同时负载请求,通过观察每个主机的负载,能够确定是否你的测试是合理和正确的。大量测试表明,当带宽不是问题而且带宽没有占满,比如千兆网网络连接的Mycat和MySQL服务器,以及测试客户端,(通常个人电脑到服务器的连接为100M),分片表的性能取决于后端部署MySQL的物理机的个数,比如每个MySQL的性能是5万Tps,则3台理论上是15万,而Mycat能达到80-95%之间,即12万以上。关于带宽问题,是一个比较棘手的问题,通常需要监控交换机、MySQL服务器、Mycat服务器、以获取测试过程中的端口流量信息,才能确定是否带宽存在问题,另外,很多企业里,千兆交换机采用了百兆的普通网线的情况时有发生,防不胜防,所以,在不能控制的网络环境里,测试最大性

  • 如何使用Linux dd命令克隆磁盘

    在本教程中,我们将参考Linuxdd命令的一个实际示例,系统管理员可以使用该命令将以MBR或GPT布局样式分区的较大HDD的Windows操作系统或Linux操作系统迁移到较小的SSD。在本节摘录中,我们将使用安装在具有多个分区的硬盘上的Windows系统作为示例。在HDD以MBR方案分区并且包含具有多个逻辑分区的扩展分区或分区无序的情况下,该方法可能变得相当复杂。如果是这样,我建议你不要使用这种方法。在这种情况下,使用ddrescure更安全,它可以克隆整个磁盘布局(分区表和每个分区内的已使用块),而不会实际传输空的空间。可以通过从Ubuntu主存储库安装gddrescue包获得DDrescure。第一步-收缩分区您可以使用实时Linux发行版(如Gparted)或从UbuntuDesktopLiveISO映像运行gpartedGUI实用程序,将Linux或Windows分区(缩小)调整到最小大小。可以使用操作磁盘分区文件系统大小(ext2,ext4,NTFS,xfs)的其他付费Linux发行版是分区向导或PartedMagic。您还可以使用MicrosoftWindowsdiskm

  • 全网首发 Power BI DAX 纯原生高性能分页矩阵

    在PowerBI中显示一个大型的表,并不擅长,因为PowerBI更倾向于制作高度聚合的可视化图表,但如果就是希望做到可以显示大篇幅的分页表格怎么办呢?本文就是来给出答案的。 背景说明先看效果吧:这是一个拥有上千笔订单的表格,用户只想看其中的一部分,并通过分页实现。这里要实现的动态效果包括三点:用户可以自主决定每页多少行数用户可以自主决定要显示的页码表格要进行标识当前所在的行数另外,以该案例为例,表格的显示应该依据具体的一个列排序,当出现重复值的时候,依然可以平滑处理。在本案例中,是按照订单日期排序的,但会出现订单日期一样的订单,它们的排名是不同的,被有效错开了。当然,最最重要的是:该解决方案必须具有通用性。很显然,以上全部已经实现。实现方法该控件的实现方法非常巧妙。大致思路如下:先给出动态可选的页面控件,表现为:两个切片器。再给出表格是否在某个页面的判断,用度量值作为表格的筛选器。再计算行号。根据这个实现思路就可以逐步来构建这个通用方法了。分页控件的构造可以用以下DAX构建分页控件如下:PageControl= //请设置三个参数 VARvOptionNumber=10//有多少种

  • VBA数据类型String

    前面说到的指针Pointer,其实主要是说了取地址函数。得到了变量的地址,只能赋值给Long类型,并没有指针的作用,无法根据这个记录了变量地址的东西来操作变量。 但能得到变量地址,就可以去查看变量的内存布局,从而深入了解类型。 VBA里数值类型Integer、Long那些,内存布局比较简单,无非是1个、2个、4个连续的字节。而String类型是有点不一样的,有了指针Pointer讲到的取指针函数,我们就可以对String深入了解一下。深入了解数据类型有什么用? 比如你想用C语言写dll给VBA调用,C语言可是没有String类型的,C的函数该如何去用?这就涉及到了数据类型的内存结构,深入了解才能够使用好。微软官方文档data-type-summaryString(variable-length)10bytes+stringlength0toapproximately2billion String(fixed-length)Lengthofstring1toapproximately65,400复制1、String变长内存结构10字节是如何分配的?通过网上的一些资料和自己猜测:变量本身占

  • 在 Android 中如何确定 App(Activity) 的启动者

    最近在帮忙定位一个问题,涉及到某个应用自动启动了,为了确定是谁调用的,使用如下的日志进行查看(注:为了简单考虑,下面的启动者为launcher)1 2 3 4(pre_release|✔)%adblogcat|grep-E"ActivityManager:START"--color=always IActivityManager:STARTu0{act=android.intent.action.MAIN cat=[android.intent.category.HOME]flg=0x10000000hwFlg=0x10 cmp=com.huawei.android.launcher/.unihome.UniHomeLauncher(hasextras)}fromuid10070我们看最后看到这个fromuid10070,嗯,基本定位到了是这个uid的应用启动了。确定uid10070是哪个App确定uid不能说明问题,我们至少需要确定是哪个应用,我们尝试使用下面的命令过滤进程有关数据1 2adbshellps|grep10070 没有任何数据输出然而一无所获。当然前

  • 从零开始折腾博客:服务器,购买和配置

    接下来搭建博客的第一步,就是选定相应的服务器。博客总归是要跑在硬件上的,那么这期我们就要搞定相应的硬件。服务器概念辨析独立服务器独立服务器:顾名思义,就是一个躺在机房的实实在在的物理服务器,专属于你,和你家的主机没啥区别,除了24小时运行。不过既然是专属的,价格嘛...VPSVPS(VirtualPrivateServer),虚拟专用服务器,是指将一个独立服务器通过虚拟化技术虚拟成多个虚拟专用服务器。在这上面你可以按照自己的要求装载自己的操作系统与软件。但是一旦套餐和配置选定,就无法再进行更改。云服务器ElasticComputeService,ECS,看起来和VPS差不多,其实是有区别的。云服务器是一个大的集群服务器,相对的安全性和稳定性也要强,也有更好的灵活性,可以随时地扩充和进一步扩展。腾讯云服务器与普通的IDC机房或服务器厂商相比,腾讯云服务器CVM具有高可用性、安全性和弹性优势。注册账号之前点先领取腾讯云2860元代金券,用于购买腾讯云CVM云服务器、云数据库产品时可以用来抵用,节约财务成本。虚拟主机Virtualhosts(Vhost),相当于几台虚拟主机共用一个环境,所以

  • 问答集锦:DTC直接转矩控制

    直接转矩控制-也称DTC–是目前世界上已开发的最先进的交流传动技术。什么是直接转矩控制?直接转矩控制–也称DTC–是由ABB开发的一种最新的交流传动技术,在不久的将来,会取代传统的PWM开/闭环控制。为什么叫做直接转矩控制?直接转矩控制是直接基于电机电磁状态来控制转矩和速度的一种方式,类似于直流电机。但与PWM控制使用输入电压及频率的传统方式不同。DTC是第一种控制“真正”电机转矩和磁通变量的技术。直接转矩控制的优势?由于转矩和磁通作为电机参数是被直接控制的,所以不需要使用类似于PWM控制中的调制器来控制频率和电压。这种控制方式剔除了中间环节并提升了传动改变转矩的响应速度。DTC不需要反馈设备也可以提供精确的转矩控制。为什么需要另一种交流传动技术?DTC不仅仅是交流传动技术的一种。工业应用对传动控制的要求越来越高,旧的传动技术已经不能满足这些要求。举例,工业应用需要:•在一定程度上可以通过改善的速度精度和快速的转矩控制,获得更好的产品质量。•缩短停机时间,避免无谓的跳闸;传动能省去复杂的反馈设备;传动设备不会受到严重的干扰(如谐波和射频干扰)。•更少的产品数量。无论是交流、直流或伺服产

  • 江苏工匠杯 easyphp

    题目来源:题目来源https://adworld.xctf.org.cn/题目概览一进来引入眼帘的就是一段PHP。<?php highlight_file(__FILE__); $key1=0; $key2=0; $a=$_GET['a']; $b=$_GET['b']; if(isset($a)&&intval($a)>6000000&&strlen($a)<=3){ if(isset($b)&&'8b184b'===substr(md5($b),-6,6)){ $key1=1; }else{ die("Emmm...再想想"); } }else{ die("Emmm..."); } $c=(array)json_decode(@$_GET['c']); if(is_array($c)&&!is_numeric(@$c["m"])&&$c[&q

  • Redis 9种数据结构以及它们的内部编码实现

    90%的人知道Redis5种最基本的数据结构; 只有不到10%的人知道8种基本数据结构,5种基本+bitmap+GeoHash+HyperLogLog; 只有不到5%的人知道9种基本数据结构,5.0最新版本数据结构Streams; 只有不到1%的人掌握了所有9种基本数据结构以及8种内部编码; 掌握这篇文章的知识点,让你成为面试官眼中Redis方面最靓的仔! 说明:本文基于Redis-3.2.11版本源码进行分析。   5种普通数据结构 这个没什么好说的,对Redis稍微有点了解的都知道5种最基本的数据结构:String,List,Hash,Set,SortedSet。不过,需要注意的是,这里依然有几个高频面试题。 Set和Hash的关系 答案就是Set是一个特殊的value为空的Hash。Set类型操作的源码在tset.c中。以新增一个元素为例( intsetTypeAdd(robj*subject,sdsvalue)),如果编码类型是OBJENCODING_HT,那么新增源码的源码如下,事实上就是对dict即Hash数据结构进行操作,并且dictSetVal时va

  • C语言uint8

    一、C语言基本数据类型回顾 在C语言中有6种基本数据类型:short、int、long、float、double、char 1、数值类型 1)整型:short、int、long 2)浮点型:float、double 2、字符类型:char 二、typedef回顾 typedef用来定义关键字或标识符的别名,例如: typedefdoublewages;typedefwagessalary;三、uint8_t\uint_16_t\uint32_t\uint64_t1、这些类型的来源:这些数据类型中都带有_t,_t表示这些数据类型是通过typedef定义的,而不是新的数据类型。也就是说,它们其实是我们已知的类型的别名。 2、使用这些类型的原因:方便代码的维护。比如,在C中没有bool型,于是在一个软件中,一个程序员使用int,一个程序员使用short,会比较混乱。最好用一个typedef来定义一个统一的bool: typedefcharbool;在涉及到跨平台时,不同的平台会有不同的字长,所以利用预编译和typedef可以方便的维护代码。 3、这些类型的定义: 在C99标准中定义了这些数据

  • Python开发 必备

    【链接】9Django模型层(2) https://www.cnblogs.com/yuanchenqi/articles/8963244.html https://www.cnblogs.com/yuanchenqi/articles/7617280.html  【链接】使用管理工具https://www.cnblogs.com/yuanchenqi/articles/8323452.html   http://www.cnblogs.com/wupeiqi/p/9112689.html#3989006小猪佩奇老师最新的一篇博客, 【链接】11Django组件-forms组件https://www.cnblogs.com/yuanchenqi/articles/9036474.html   【链接】Django-mtv http://www.cnblogs.com/yuanchenqi/articles/7629939.html#_label4   【链接】Django-model进阶 http://www.cnblogs.com/yuanch

  • 【转】Robot Framework 快速入门

    目录 介绍 概述 安装 运行demo 介绍样例应用程序 测试用例 第一个测试用例 高级别测试用例 数据驱动测试用例 关键词keywords 内置关键词 库关键词 用户定义关键词 变量 定义变量 使用变量 组织测试用例 测试套件 启动和卸载 使用标签 创建测试库       介绍 概述 RobotFramework 是一个关键词驱动的自动测试框架。测试用例位于HTML或者TSV(以tab分隔值)文件,使用在测试库中实现的关键词来在测试中运行程序。因为RobotFramework 是灵活和可扩展的,所以它很合适用于测试具有多种接口的复杂软件:用户接口,命令行,webservice,编程接口等。 RobotFramework 是开源软件和安装包,源码和相关文档可通过http://robotframework.org获得。本篇指南计划介绍RobotFramework 的基本概念。如果需要详细的技术描述,请查阅RobotFrameworkUserGuide. 安装 安装RobotFramework 的前提是Pytho

  • 一些笔记(xss 跨站脚本攻击)

    xss攻击,通常指“HTML注入”篡改了网页,插入恶意脚本,从而在浏览网页时控制网页浏览器的一种攻击。 xss分类: 1.反射型xss(非持久型xss) 把用户输入的数据“反射”给浏览器。(诱使用户点击一个恶意链接才可攻击成功) 2.存储型xss 将用户输入的数据“存储”在服务器端,具有很强的稳定性。 如含有恶意JS代码的博客文章发表后,所有访问博客的用户浏览器中都执行这段恶意的代码,把恶意脚本保存到服务器端。 3.DOMBasedXSS 从效果上说也是反射型xss,通过修改网页的DOM节点形成的XSS。  

  • Lighting Techinology of the Last Of Us (2013 SIGGRAPH)

    LightingTechinologyoftheLastOfUs(2013 SIGGRAPH) or"OldLightmaps-NewTricks" 原作:Michallwanicki 本篇主要讲述TheLastofUs中用到的用到的光照技术,以及解决问题的思路,原作者wanicki是顽皮狗的引擎工程师,同时也参与了RealTimeRendering4th的编写。 ppt原文链接[http://miciwan.com/SIGGRAPH2013/LightingTechnologyofTheLastOfUs.pdf] 同时也要感谢下工作室大佬的解惑。 目录 一.背景介绍 二.最小二乘降低误差 三.Lightmaps 四.出现的问题和解决方法 五.优化方法 六.结论 一.背景介绍 由于游戏发生在后世界末日,几乎没有电,所以没有人造光源。大部分的光线来自太阳和天空,所以大部分的环境都是由反射光照亮的。 有一个非常强大的艺术方向:我们想展示这个灯光的美丽,它的柔和,它如何在不同表面之间传播,它创造的柔和阴影。我们想显示间接光照的镜面反射高光,并显示用普通的normalmap展示细节。 首先

  • QiyeProject SpringMVC 项目 d15866p148.iok.la 主要做主页应用,消息应用不管了 用户微信号有点像乱码的那个是openID 找同伴:在项目的GitHub页面里找提问过的人,还有fork,star的人

    消息型应用支持文本、图片、语音、视频、文件、图文等消息类型。主页型应用只支持文本消息类型,且文本长度不超过20个字。填写必要信息URL/QiyeProject/src/org/oms/qiye/util/Constants.java /**WXBizMsgCrypt类里:*提供接收和推送给公众平台消息的加解密接口(UTF8编码的字符串).*<ol> *    <li>第三方回复加密消息给公众平台</li> *    <li>第三方收到公众平台发送的消息,验证消息的安全性,并对消息进行解密。</li>*</ol>*说明:异常java.security.InvalidKeyException:illegalKeySize的解决方案*<ol> *    <li>在官方网站下载JCE无限制权限策略文件(JDK7的下载地址: *&nb

  • Mac Virtual System On Windows

    Win8.1下利用虚拟机安装苹果操作系统   所需文件: 虚拟机:VMware-10.0.1,这个就是中文版的了。 虚拟机密钥生成器:vm10keygen,要对应虚拟机的版本。 虚拟机的插件: unlock-all-v120,没有这个安装的时候不会出现苹果系统的选项。 VMwareToolsDarwin,用于安装完苹果系统后调整为适合本机的分辨率。 苹果系统:MAC_OS_X_Mavericks_10.9,必须要有啊,要不怎么装       正文:   首先安装虚拟机软件:   看机器的配置可能会等几分钟。   当然要接受,不接受你装它干嘛?(汗)   这一步选择典型即可!(高玩可以自定义安装一些程序功能)   选择该虚拟机软件的安装位置。     这些你都可以按照你自己的意愿来。       到这一步就需要开始提到的密钥生成器了,双击密钥生成器的可执行文件就可以看到如下界面,把其生成的一串密钥复制下来粘贴到上面即可。   好了,安装完毕

  • 资源共享

    不管是学习还是娱乐,生活中我们经常要找一些资源(例如各种教学视频、源代码、破解版的软件,考试资料、报告文档,又或者是最新电影等等),有很多人都无从下手。其实网络是一个非常丰富、好用的资源库,只是看你知不知道途径而已。下面推荐一下鄙人觉得很赞的平台、网站,希望对某天看到这篇博客的人有所帮助吧。 (虽然说我这博客无人问津。。。至少是作为自己的一个总结吧) 网盘、云盘: 云盘是个非常赞的一个平台,几T的容量完全可以用来备份电脑里面重要的资料,另外云盘的“共享”也绝对是个好东西!我看的电影、看的教学视频,还有某些破解版的软件都是从这里下的。http://yunsou.1sohu.com/这个云搜网址是用来搜索各种云盘共享出来的资源,非常好用!! QQ群: 对于自学的人来说,QQ群不仅可以用来问问题,而且还可以通过解答别人的问题来巩固自己。另外,对应的Q群里面一般都是会有相应的共享文件的。想当初我学Android蓝牙的时候就是加了很多很多有关Android蓝牙的QQ群,然后把群里面的共享文件所有有用的资料都下下来,然后退群。。。。虽然好像有一点点损,但确实下到了很多有用的资料,免得我网上

  • 动态加载js文件

    如果不需要浏览器做缓存,可以试一下在header里写一些信息(具体没试过,网上找的)   <metahttp-equiv="Expires"content="0"> <metahttp-equiv="Pragma"content="no-cache"> <metahttp-equiv="Cache-control"content="no-cache"> <metahttp-equiv="Cache"content="no-cache">复制       动态加载js文件,在js资源url后加随机数   <script> document.write("<scripttype='text/javascript'src='js/test.js?"+Math.random();+"'></script>"); </script>复制  

  • KDA 阿狸 同人3d壁纸 家居服 英雄联盟P图 S10

  • 【CICD】gitlab+jenkins+sonarqube实现自动构建、代码自动检测

    1前提条件 1、需要安装gitlab、jenkins、sonarqube; 2、gitlab需要能访问jenkins地址,网络是通的,因为需要通过gitlab推送事件到jenkins机器; 3、gitlab项目,需要有主程序员及以上权限。 2整体思路 1、当有代码push到代码仓库的时候,gitlab是知道的,gitlab检测到有代码push的时候,执行一个钩子(gitlab上叫hook),可以理解为触发一个推送时间,推送到jenkins; 2、jenkins检测到这个事件之后,自动构建(不用手动了); 3、jenkins可以配置构建后动作,配置构建后自动执行sonarqube检测。至此,完成自动构建+自动检测的全过程。 3第一步:配置密钥对 使用jenkins账号邮箱,生成密钥对。 ssh-keygen-trsa-C"邮箱地址"-b4096 复制 1、私钥,配置在jenkins的项目配置中,下面会说配置在哪。 2、公钥,配置在gitlab的个人设置中,菜单:“SSH密钥“,如下图所示。 4配置jenkins和sonarqube 1、在jenkins中创建一个项目; 2、打开“

相关推荐

推荐阅读