<!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible"  content="ie=edge">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

   </head>

   <body>

     <div id="app">

       <input type="text" v-model="firstname">+

       <input type="text" v-model="lastname">=

       <input type="text" v-model="fullname">

     </div>

     <script>

       //创建 Vue 实例，得到 ViewModel

       var vm =  new Vue({

         el:'#app',

         data:{

           firstname:'',

           lastname:'',

           fullname:''

         },

         methods:{},

         watch:{//使用这个属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数

           //firstname的单引号''可加可不加，first-name必须要加单引号''，'firstname'对象的一个属性

           'firstname':function(newVal,oldVal){

             // console.log('监听到了 firstname 的变化')

             // this.fullname=this.firstname+'-'+this.lastname

             // console.log(newVal+'---'+oldVal)

             this.fullname=newVal+'-'+this.lastname

           },

           'lastname':function(newVal){

             this.fullname=this.firstname+'-'+newVal

           }

         }

       });

     </script>

   </body>

 </html>

第八章 watch监听 83 名称案例-使用watch监听文本框数据的变化的更多相关文章

  1. vue实现实时监听文本框内容的变化（最后一种为原生js）

    一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  2. js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别

    在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...

  3. 第七章 路由 82 名称案例-使用keyup事件实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. Httpd服务入门知识-Httpd服务常见配置案例之修改监听的IP和Port

    Httpd服务入门知识-Httpd服务常见配置案例之修改监听的IP和Port 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看默认配置 [root@node101.yinzh ...

  5. ng 监听数据的变化

    $scope.$watch('监听的变量的名称',func) 在angularJs之所以能够实现绑定,是因为angularJS框架在背后为每一个模型数据添加了一个监听,与$watch其实是一个道理. ...

  6. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  7. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  8. jquery实时监听某个文本框的输入事件

    想给页面的的一个文本框添加监听事件 $(function(){ //页面加载完毕后触发事件 $("textarea[name='content']").bind('input pr ...

  9. 监听SWT文本框只能输入数字

    在SWT开发中,很多时候需要文本框只能输入数字(当输入字母或者其他字符时为无效),这个时候需要给文本框设置监听VerifyListener, code 如下: text.addVerifyListen ...

随机推荐

  1. linux内核开源代码地址下载

    https://www.kernel.org/pub/linux/kernel/v2.6/

  2. yum方式安装mono

    https://blog.csdn.net/qq_21153619/article/details/81459359 这样应该比较简单 yum方式按照mono rpm --import "h ...

  3. JDK1.8 新特性（全）

    原文链接:https://blog.csdn.net/qq_29411737/article/details/80835658

  4. 使用winsw包装服务将nginx包装为Windows服务

    **Nginx本身在Windows上并不支持以服务的形式运行,官方文件中有提到.http://nginx.org/en/docs/windows.html,所以在Windows下使用winsw将Ngi ...

  5. OpenVZ平台 Google BBR加速

    前言  一直以来用的都是搬瓦工的VPS,不得不说比国内那些大厂的性价比高得不知道哪里去了.  当做梯子来用的话搬瓦工年付19.9美元的方案就够用了,网上还有一些官方优惠码(折扣6%: BWH1ZBPV ...

  6. 在使用selenium时出现FileNotFoundError: [WinError 2] 系统找不到指定的文件。

    今天在使用selenium出现这样的错: Traceback (most recent call last): File "E:\python\lib\site-packages\selen ...

  7. sysbench测试

    什么是基准测试 数据库的基准测试是对数据库的性能指标进行定量的.可复现的.可对比的测试. 基准测试与压力测试 基准测试可以理解为针对系统的一种压力测试.但基准测试不关心业务逻辑,更加简单.直接.易于测 ...

  8. 数据库HAVING的使用

    HAVING语句通常与GROUP BY语句联合使用,用来过滤由GROUP BY语句返回的记录集. HAVING语句的存在弥补了WHERE关键字不能与聚合函数联合使用的不足. 记录一下

  9. luogu P4688 [Ynoi2016]掉进兔子洞

    luogu 我们要求的答案应该是三个区间长度\(-3*\)在三个区间中都出现过的数个数 先考虑数列中没有相同的数怎么做,那就是对三个区间求交,然后交集大小就是要求的那个个数.现在有相同的数,考虑给区间 ...

  10. nested exception is org.apache.ibatis.binding.BindingException

    mybatis出错 xml文件: <update id="decreaseStock"> update item_stock set stock = stock - # ...