<!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. Windows Server 2019远程桌面服务配置和授权激活

    参考Windows Server 2016远程桌面服务配置和授权激活方法可适用于Windows Server 2019     Server 2016默认远程桌面连接数是2个用户,如果多余两个用户进行 ...

  2. 自然语言处理NLP学习笔记一：概念与模型初探

    前言 先来看一些demo,来一些直观的了解. 自然语言处理: 可以做中文分词,词性分析,文本摘要等,为后面的知识图谱做准备. http://xiaosi.trs.cn/demo/rs/demo 知识图 ...

  3. 宝塔配置composer默认的PHP版本

    当安装composer时,提示PHP版本问题: rm -f /usr/bin/php //这是默认的版本,删除 ln -sf /www/server/php/71/bin/php /usr/bin/p ...

  4. hdoj5909 Tree Cutting（点分治+树上dp转序列dp）

    题目链接:https://vjudge.net/problem/HDU-5909 题意:给一颗树,结点带权值v[i]<m.求异或和为k的子树个数(0<=k<m). 思路: 首先点分治 ...

  5. [转帖]如何在VirtualBox中运行macOS Catalina Beta版本

    如何在VirtualBox中运行macOS Catalina Beta版本 secist2019-08-03共2179人围观系统安全 https://www.freebuf.com/articles/ ...

  6. 使用foreach的禁忌

    List<String> list = new ArrayList<>(); Iterator<String> iterator = list.iterator() ...

  7. H. The Nth Item（The 2019 Asia Nanchang First Round Online Programming Contest）

    题意:https://nanti.jisuanke.com/t/41355 给出N1,计算公式:A=F(N)Ni=Ni-1 ^ (A*A),F为类斐波那契需要矩阵快速幂的递推式. 求第k个N. 思路: ...

  8. js预解析实例

    <script> // f1(); // console.log(c);//9 // console.log(b);//9 // console.log(a);//报错 // functi ...

  9. go intall的使用

    1.首先GOPATH路径指向src的上级目录 2.设置GOBIN路径指向bin目录 3.查看环境配置 4.go install 在src目录下 5.完成 6.pkg ide编译运行一下自动生成

  10. CVPR2019目标检测方法进展综述

    CVPR2019目标检测方法进展综述 置顶 2019年03月20日 14:14:04 SIGAI_csdn 阅读数 5869更多 分类专栏: 机器学习 人工智能 AI SIGAI   版权声明:本文为 ...