<!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. Zookeeper白话解释

    官方的解释:Zookeeper提供了诸如统一命名空间服务,配置服务和分布式锁等分布式基础服务. 嗯,说上面这个话的人,良心不会痛吗? Zookeeper功能如上边说到的:统一命名空间服务 其他就tm跟 ...

  2. C学习笔记-gdb

    gdb即GNU debugger,用来调试程序 gdb使用前提 要使用gdb,则需要在编译源代码时候使用-g参数 gcc -g –o test test.c 启动gdb gdb 程序名 [corefi ...

  3. C#ModBus Tcp

    C#ModBus Tcp 报文解析   上一篇博客已经完成 C#ModBus Tcp Master的实现 本篇主要对不同的功能码所发出的报文进行解析(包括请求报文及响应报文) 读操作 功能码 0x01 ...

  4. PYTHON 100days学习笔记007-2：python数据类型补充(2)

    目录 day007:python数据类型补充(2) 1.Python3 元组 1.1 访问元组 1.2 删除元组 1.3 元组运算符 1.4 元组索引,截取 1.5 元组内置函数 2.python3 ...

  5. [loj#2005][SDOI2017]相关分析 _线段树

    「SDOI2017」相关分析 题目链接:https://loj.ac/problem/2005 题解: 把上面的式子拆掉,把下面的式子拆掉. 发现所有的东西都能用线段树暴力维护. 代码: #inclu ...

  6. JVM 分析工具和查看命令，超详细

    jinfo 可以输出并修改运行时的java 进程的opts. jps 与unix上的ps类似,用来显示本地的java进程,可以查看本地运行着几个java程序,并显示他们的进程号. jstat 一个极强 ...

  7. Socket-实例

    import socket,os,time server = socket.socket() server.bind(("localhost",9999)) server.list ...

  8. Java EE javax.servlet.http中的HttpRequest抽象类

    HttpRequest抽象类 public abstract class HttpServlet extends GenericServlet 实现的接口有:Serializable, Servlet ...

  9. 【转】js小数转百分比

    转自:js小数和百分数的转换 function toPercent(point){ var str=Number(point*100).toFixed(1); str+="%"; ...

  10. 连接云服务器中MySql数据库遇到的问题

    使用的免费的云服务器,上面只能下载MySql数据库,不过当云数据库使用绰绰有余了,也就放一些测试数据而已 而且上面只可以部署php项目,.netcore项目部署实现比较麻烦 问题如下: 下载了navi ...