第八章 watch监听 83 名称案例-使用watch监听文本框数据的变化
<!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监听文本框数据的变化的更多相关文章
- vue实现实时监听文本框内容的变化（最后一种为原生js）
一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
- 第七章 路由 82 名称案例-使用keyup事件实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Httpd服务入门知识-Httpd服务常见配置案例之修改监听的IP和Port
Httpd服务入门知识-Httpd服务常见配置案例之修改监听的IP和Port 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看默认配置 [root@node101.yinzh ...
- ng 监听数据的变化
$scope.$watch('监听的变量的名称',func) 在angularJs之所以能够实现绑定,是因为angularJS框架在背后为每一个模型数据添加了一个监听,与$watch其实是一个道理. ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- 监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
- jquery实时监听某个文本框的输入事件
想给页面的的一个文本框添加监听事件 $(function(){ //页面加载完毕后触发事件 $("textarea[name='content']").bind('input pr ...
- 监听SWT文本框只能输入数字
在SWT开发中,很多时候需要文本框只能输入数字(当输入字母或者其他字符时为无效),这个时候需要给文本框设置监听VerifyListener, code 如下: text.addVerifyListen ...
随机推荐
- U盘ios系统制作
首先我们先安装软碟通,完成安装后打开软碟通,文件->打开,打开我们的iso镜像 步骤阅读 然后选择我们的U盘 步骤阅读 然后点击启动->写入硬盘映像 步骤阅读 写入方式有zip ...
- 【并行计算-CUDA开发】GPU---并行计算利器
1 GPU是什么 如图1所示,这台PC机与普通PC机不同的是这里插了7张显卡,左下角是显卡,在中间的就是GPU芯片.显卡的处理器称为图形处理器(GPU),它是显卡的"心脏",与CP ...
- 如何在picture上显示透明Label
- TCP的粘包、半包和Netty的处理
参考文献:极客时间傅健老师的<Netty源码剖析与实战>Talk is cheap.show me the code! 什么是粘包和半包 在客户端发送数据时,实际是把数据写入到了TCP发送 ...
- T100——单据别的新增、修改设置
何为单据别,例如下图,新增的时候开窗选择单据别: 新增单据别: 1.首先在azzi600 系统分类码维护作业里面新增新的系统分类码(在系统分类码24下新增),如图: 2.在azzi910 作业基本数据 ...
- 代理、反射、注解、hook
代理 通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的基础上,扩展目标对象的功能. 代理对象拦截真实对象的方法调用,在真实对象调用前/后实现自己的逻辑调用 这里使用到编程中的一个思想:不 ...
- 安装jenkins时出现 No such plugin: cloudbees-folder的解决办法
今天安装了一下jenkins,在初始化安装插件时出现" No such plugin: cloudbees-folder"错误,根据网上的教程: 1.打开链接"http: ...
- 《深入实践C++模板编程》之六——标准库中的容器
1.容器的基本要求 a.并非所有的数据都可以放进容器当中.各种容器模板对所存数据类型都有一个基本要求——可复制构造.将数据放进容器的过程就是通过数据的复制构造函数在容器内创建数据的一个副本的过程. b ...
- Ubuntu 忘记系统登录密码，如何修改密码
Ubuntu 忘记系统登录密码,如何修改密码. 1.重新启动,按ESC键进入Boot Menu,选择recovery mode(一般是第二个选项). 2.在#号提示符下用cat /etc/shadow ...
- LeetCode：182.查找重复的电子邮箱
题目链接:https://leetcode-cn.com/problems/duplicate-emails/ 题目 编写一个 SQL 查询,查找 Person 表中所有重复的电子邮箱. 示例: +- ...