VUE：计算属性和监视
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1、计算属性：
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算结果
2、监视属性：
通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时，回调函数自动调用，在函数内部进行计算
3、计算属性高级：
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存，多次读取只执行一次getter计算
--> <div id="app">
姓：<input type="text" placeholder="First Name" v-model="firstName"/><br />
名：<input type="text" placeholder="Last Name" v-model="lastName" /><br />
姓名1（单向）：<input type="text" placeholder="Full Name1" v-model="fullName1"/><br />
姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="fullName2"/><br />
姓名3（双向）：<input type="text" placeholder="Full Name3" v-model="fullName3"/><br />
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript">
//const常量
const vm=new Vue({
el:"#app",
data:{
firstName:'A',
lastName:'B',
fullName2:'A B'
},
computed:{
//计算属性的方法,方法的返回值作为属性值。
//执行条件：初始化显示的时候或data发生改变的时候调用
fullName1(){
return this.firstName+' '+this.lastName;
},
fullName3:{
//回调函数（1.你定义的，2.你没有调，3.但最终它执行了）计算并返回结果
//当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
get(){
return this.firstName+' '+this.lastName;
},
//当属性值发生改变时回调，更新相关的属性数据
//value：fullName3的最新值
set(value){
const names=value.split(' ');
this.firstName=names[0];
this.lastName=names[1];
}
} },
watch:{
//传参 (新的值,旧的值) 或 (旧的值)
firstName:function(value){
this.fullName2=value+' '+this.lastName;
},
/*lastName:function(value){
this.fullName2=this.firstName+' '+value;
}*/
}
}) vm.$watch('lastName',function(value){
this.fullName2=this.firstName+' '+value;
})
</script>
</body>
</html>
重点：计算属性存在缓存
VUE：计算属性和监视的更多相关文章
- (尚004)Vue计算属性之基本使用和监视
所做效果预览: test004.html <!DOCTYPE html><html lang="en"><head> <meta char ...
- Vue 计算属性 && 监视属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- (尚006)Vue计算属性之set与get
test004.html <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...
- Vue计算属性
github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...
- 在做vue计算属性，v-for处理数组时遇到的一个bug
bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- vue 计算属性 实例选项 生命周期
vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...
- Vue计算属性缓存(computed) vs 方法
Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...
- vue 计算属性实现过滤关键词
效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
随机推荐
- 微信小程序 全局变量
微信小程序里面有个app.js,我们可以在这个里面设置全局变量, App({ globalData:{ url:"http://xxx.xxx.xx:3000" } }) 在外面就 ...
- FreeMarker 语法 null 的处理
一.java 代码 @Test public void testFreeMarker() throws Exception { //1.创建一个模板文件 //2.创建一个Configuration对象 ...
- spring boot系列--spring security (基于数据库)登录和权限控制
先说一下AuthConfig.java Spring Security的主要配置文件之一 AuthConfig 1 @Configuration 2 @EnableWebSecurity 3 publ ...
- AOP经典2种配置演示样例
第一种: 使用aop指定切面aspect. <bean id="LogAdvice" class="com.thinkmore.framework.monitor. ...
- C++ 嵌入汇编程序提高计算效率
因为汇编语言比C++更接近硬件底层,所以在性能要求高的程序中往往能够採取在C++代码中嵌入汇编的方式来给程序提速. 在VC中能够简单的通过 __asm { //在这里加入汇编代码 } 来实现. 以下通 ...
- JDBC 具体解释(1)
JDBC 具体解释(1) 在以java application server应用为主的平台是,JDBC的最高级应用是DataSource的实现,其他的JDO,webcache,hibe ...
- Java笔试面试题001
Java笔试面试题之中的一个 1.Struts1中actionform和action属于MVC哪一层,为什么? 解答:actionform和action属于MVC的Model层,Action用来处理业 ...
- 我的Android进阶之旅------>android Button上面的英文字符串自己主动大写的问题解决
今天碰到一个关于Button的问题:android Button上面的英文字符串会自己主动变成大写,执行的Android 5.1版本号,例如以下图所看到的: 图1:Button 图2:TextView ...
- Linux 下配置，安装Hadoop
1.从官网上下载hadoop-2.4.1.tar.gz,我的版本为hadoop-2.4.1,可在http://pan.baidu.com/s/1cLAKCQ 下载. 2.解压hadoop-2.4.1. ...
- 创建多线程的HttpClient
在实际的应用中,我们的联网应用程序里应该有一个HttpClient,并将其用于所有的HTTP通信.这就可能在同一个Http Client同时发出多个请求,也就产生了多线程的问题.幸运的是,在HttpC ...