013_Vue监听器

1. 监听器的应用场景

1.1. 数据变化时执行异步或开销比较大的操作。

1.2. 监听器用法

watch: {// 监听firstName的值的变化firstName: function(val){this.fullName = val + "" + this.lastName;}
}

2. 监听器例子

2.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>监听器</title></head><body><div id="app"><div><span>姓: </span><input type="text" v-model="firstName" /></div><div><span>名: </span><input type="text" v-model="lastName" /></div><div>{{fullName}}</div><div>{{computedFullName}}</div><hr /><div><span>用户名:</span><span><input type="text" v-model.lazy='userName' /></span><span>{{tip}}</span></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {firstName: "",lastName: "",fullName: "",userName: "",tip: ""},methods: {checkUserName: function(userName){var me = this;setTimeout(function(){if(userName == "zhangsan"){me.tip = "用户名已经存在, 请换一个..."}else{me.tip = "用户名可用..."}}, 2000);}},computed: {computedFullName: function(){var value = this.firstName + this.lastName;console.log(value)return value;}},watch: {firstName: function(val){this.fullName = val + "" + this.lastName;},lastName: function(val){this.fullName = this.firstName + val;},userName: function(val){this.checkUserName(val);this.tip = "正在验证...";}}});</script></body>
</html>

2.2. 效果图

013_Vue监听器相关推荐

jemeter监听器的使用
打开jemeter,新建线程组,添加http请求,在请求下添加监听器: 一.添加一个jp@gc - PerfMon Metrics Collector监听器: 服务器性能监测控件,包括CPU,memo ...
Servlet,过滤器，监听器，拦截器的区别
由于最近两个月工作比较清闲,个人也比较"上进",利用工作空余时间,也继续学习了一下,某天突然想起struts2和struts1的区别的时候,发现为什么struts1要用servl ...
安卓开发|自定义监听器的三个步骤
首先,要有一个实现View.OnClickListener接口的类这个类要重写onClick(View v)这个方法,里面加入想要触发的事件将监听器绑定在要监听的组件上,例如 holder.ver ...
android监听器在哪里创建,[转载]android开发中创建按钮事件监听器的几种方法
第一种:匿名内部类作为事件监听器类 Button button=(Button) findViewById(R.id.button); button.setOnClickListener(new On ...
android点击事件注册方式,Android界面控件（3）— 注册同一个点击事件的监听器...
2019独角兽企业重金招聘Python工程师标准>>> CheckBox 和 RadioButton 1.添加控件 .xml代码如下: CheckBox是同时可以选择多个选项的控件 ...
java web 监听器例子_Java web技术应用---监听器
监听器的定义 (专门用于对其他对象身上发生的事件或状态改变进行监听和相应处理的对象,当被监视的对象发生变化时,立即采取相应的行动) 定义:Servlet规范中定义的一种特殊的类,用于监听Servlet ...
javascript 变量监听器
javascript 变量监听器 <!DOCdata html> <html lang="en"> <head><meta charset ...
java超级点击器是怎么实现的_超萌新级的Java学习心得——简单监听器
之前在界面文章中提到,按钮在没有设置事件监听时,无论怎么按都不会起作用,如果要使这些按钮被按下时可以执行不同的操作,就必须使用监听器. ActionListener:可以提供用于监听按钮的监听器,一旦 ...
java web自定义监听器_Android自定义监听器Listener(自定义Java Callback回调事件)
Callback回调事件介绍 Java或Android中创建异步回调最普遍的做法就是使用listener监听器或者observer观察者模式来解决,listener回调事件通常用于实现一个代码去监听另 ...

013_Vue监听器

013_Vue监听器相关推荐

最新文章

热门文章