第八章 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 ...
随机推荐
- ambari 快速安装部署
OS:Linux CPU消耗大,要准备5G以上,不然集群启动不了(我自己给它配了8G,启动整个集群是没问题,要用的话估计不够) 一.准备工作: 1.关闭防火墙:sudo ufw disable/ 2. ...
- 第12课.经典问题解析（const；指针和引用）
问题1:const什么时候为只读变量?什么时候是常量? const常量的判别准则: a.只有用字面量初始化的const常量才会进入符号表(直接初始化过的const为常量) b.被使用其他变量初始化的c ...
- FTL-SLC&MTC&TLC
1.博客 SLC.. http://diybbs.zol.com.cn/67/231_661182.html 2.FTL --作者在普及了一些FTL基本知识后,主要分析了在linux上实现的途径 ht ...
- Flume原理分析与使用案例
1.flume的特点: flume是一个分布式.可靠.和高可用的海量日志采集.聚合和传输的系统.支持在日志系统中定制各类数据发送方,用于收集数据:同时,Flume提供对数据进行简单处理,并写到各种数据 ...
- python+requests 请求响应文本出错返回“登录超时”
Python+requests请求响应:"msg":"登录过时" 1.出错原代码: import requests import json#页面按条件搜索返回相 ...
- ARST第三周打卡
Algorithm : 做一个 leetcode 的算法题 //二位数组查找 题目描述 //在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺 ...
- Elasticsearch5.x安装及常见错误的解决方法
Elasticsearch是基于java开发的,机器上必须要先java环境,elasticsearch5.x建议用jdk8的最新版本.下面介绍elasticsearch5.x的安装步骤: 一.安装El ...
- sysbench测试
什么是基准测试 数据库的基准测试是对数据库的性能指标进行定量的.可复现的.可对比的测试. 基准测试与压力测试 基准测试可以理解为针对系统的一种压力测试.但基准测试不关心业务逻辑,更加简单.直接.易于测 ...
- hdu 1215 求约数和 唯一分解定理的基本运用
http://acm.hdu.edu.cn/showproblem.php?pid=1215 题意:求解小于n的所有因子和 利用数论的唯一分解定理. 若n = p1^e1 * p2^e2 * ……*p ...
- 原生JS-实现轮播图
用原生JS实现一个轮播图(效果) HTML <div id="outer"> <ul id="imgList"> <!-- 图片列 ...