第八章 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 ...
随机推荐
- Windows Server 2019远程桌面服务配置和授权激活
参考Windows Server 2016远程桌面服务配置和授权激活方法可适用于Windows Server 2019 Server 2016默认远程桌面连接数是2个用户,如果多余两个用户进行 ...
- Data Exfiltration with DNS in MSSQL SQLi attacks
DNS解析过程 DNS解析过程 DNS 查询的过程如下图1所示. 图1 文字举例说明: 假定浏览器想知道域名xprp8i.dnslog.cn的IP地址. 1.浏览器先向本地DNS服务器进行递归查询. ...
- 【VS开发】CListCtrl控件使用方法总结
CListCtrl控件使用方法总结 今天第一次用CListCtrl控件,遇到不少问题,查了许多资料,现将用到的一些东西总结如下: 以下未经说明,listctrl默认view 风格为report 相关类 ...
- Ubuntu16.04下使用pycharm导入scrapy框架
出现迷之问题,ubuntu终端下安装的库在pycharm中无法识别 后重新为pycharm安装相关package,得以使用 看到3即可 https://www.cnblogs.com/airnew/p ...
- makefile中=、：=和+=的区别
经常有人分不清= .:=和+=的区别 这里我总结下做下详细的分析: 首先你得清楚makefile的运行环境,因为我是linux系统,那么我得运行环境是shell 在Linux的shell里,shel ...
- 【环境搭建】Angular (含Hello World)
一.环境安装 1.安装node.js 下载路径:https://nodejs.org/en/download/ 命令行验证: 2.安装ts.cli ts: npm install -g typescr ...
- 牛客 110D 矩阵
假设$C=AB$, 那么答案就为 $\begin{align} \notag ans & =\sum\limits_{i=0}^{n-1}\sum\limits_{j=0}^{n-1}C[i] ...
- string库
Lua字符串库小集 1. 基础字符串函数: 字符串库中有一些函数非常简单,如: 1). string.len(s) 返回字符串s的长度: 2). string.rep(s,n) 返回字符串s重复n次的 ...
- windows上pip安装及使用详解
windows上pip安装及使用详解 2018-11-21 19:49:58 十二笔 阅读数 8229更多 分类专栏: Python学习 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA ...
- C#异步编程学习笔记之-async和await
一.异步方法介绍(async和await):如果使用async修饰符将某种方法指定为异步方法,即启用以下两种功能.1.标记的异步方法可以使用await来指定暂停点.await运算符通知编译器异步方法: ...