第八章 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 ...
随机推荐
- 【并行计算-CUDA开发】CUDA存储器模型
CUDA存储器模型 除了执行模型以外,CUDA也规定了存储器模型(如图2所示)和一系列用于主控CPU与GPU间通信的不同地址空间.图中红色的区域表示GPU片内的高速存储器,橙色区域表示DRAM中的的地 ...
- JS触发事件集锦
事件句柄 HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,这些属性可 ...
- Git 的配置
一般配置用户层面配置 Git 的配置从上到下分三层 system/global/local,使用三个不同参数进行设置,每个层次的配置存储在不同的位置, 1)./etc/gitconfig 文件:包含了 ...
- 使用zookeeper作为分布式锁以及设计一种通知监听模式
1.创建实例/** * 初始化单例的便捷方法 */ public static void init() { getInstance(); } /** * 获取单例 * @return */ publi ...
- speedtest-cli 命令
speedtest-cli是一个使用python编写的命令行脚本,通过调用speedtest.net测试上下行的接口来完成速度测试,项目地址:https://github.com/sivel/spee ...
- ubuntu 16.04主题美化
目录 numix图标 Flatabulous主题 参考: Unity-tweak-tool插件 numix图标 sudo apt-add-repository ppa:numix/ppa sudo a ...
- Redis（1.13）Redis cluster 分布式集群手动配置
[1]试验环境 结构图如下: (这里试验没有那么多机器,就用3台机器搭建试验) redis1是redis集群的一个节点A,上面运行了两个redis实例,7001 7004 redis2是redis集群 ...
- DOM、BOM
DOM DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: “W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新 ...
- Linux试题亿点点
1. 在登录Linux时,一个具有唯一进程ID号的shell将被调用,这个ID是什么(b) A.NID B.PID C.UID C.CID # process ID 进程id号 # UID 用户iD号 ...
- 学习实践：使用模式，原则实现一个C++数据库访问类
一.概述 在我参与的多个项目中,大家使用libMySQL操作MySQL数据库,而且是源码即复用,在多个项目中有多套相同或相似的源码,这样的复用方式给开发带来了不变,而且libMySQL的使用比较麻烦, ...