第八章 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 ...
随机推荐
- highway network及mnist数据集测试
先说结论:没经过仔细调参,打不开论文所说代码链接(fq也没打开),结果和普通卷积网络比较没有优势.反倒是BN对网络起着非常重要的作用,达到了99.17%的测试精度(训练轮数还没到过拟合). 论文为&l ...
- Java 基础篇之lambda
Lambda 示例 public interface Eatable { void taste(); } public interface Flyable { void fly(String weat ...
- Go语言中的打包和工具链
包 所有Go语言的程序都会组织成若干组文件,每组文件被称为一个包.这样每个包的代码都可以作为很小的复用单元,被其他项目引用. 包名惯例 给包命名的惯例是使用包所在目录的名字.并不需要所有包的名字都与别 ...
- ROS topic,service和action的使用场景
参考:ROS中关于topic和service的运用场合 Topics 特点: 1.单向,分工明确,处理连续数据流,topic是一种多对多的形式,一个Node可以订阅多个Topic,可以publish到 ...
- AGC040 Task C. Neither AB Nor BA
Observations 对一个长为 $2N$ 的序列重复下述操作:取走两个相邻且不同的元素.最后能把序列取空的充要条件是序列中不存在出现超过 $N$ 次的元素. 证明:必要性,取 $N$ 次最多能取 ...
- 老贾的幸福生活day 04
变量 变量名的规则: 变量名由字母,数字,下划线组成 变量名不能以数字开头 变量名要具有可描述性 变量名要区分大小写 变量名禁止使用python关键字 变量名不能使用中文和拼音 变量名推荐写法: 驼峰 ...
- django初步了解2
目录 django初步了解2 表的字段增删改查 数据的增删改查 反向解析和分组 路由分发 名称空间 伪静态 虚拟环境 django初步了解2 表的字段增删改查 新增的字段 1.直接提供默认值 defa ...
- k8s遇坑:The connection to the server k8s-api.virtual.local:6443 was refused - did you specify the right host or port?
k8s坑The connection to the server localhost:8080 was refused - did you specify the right host or port ...
- GET方法和POST方法的区别，Get方法到底可传递的字符串的最大长度是多少？
GET方法和POST方法的区别,Get方法到底可传递的字符串的最大长度是多少?曾经人介绍,如果使用GET方式传输参数,URL的最大长度是256个字节,对此深信不疑. 但是最近看到一些超长的url,能够 ...
- MVC4学习要点记三
一.数据迁移用来解决code first情况下当增加.删除.改变实体类,或改变DbContext类后,相应地更新数据库结构而不会对现有数据产生影响. 1.启用迁移指令:enable-migration ...