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 ...
随机推荐
- FreeBSD的VIM基本配置
实现的基本功能 中文解决乱码问题 鼠标右键原样粘贴 最后一次编辑文件后,鼠标位置的记忆 if v:lang =~ "utf8$" || v:lang =~ "UTF-8$ ...
- BA-Bacnet ip 、TCP/IP
BACENT IP TCP/IP协议
- [ASP.NET]EF选一个空表的情况
public List<DAL.StuFillAnswers> FillsToCheck(int sid,int eid) { using (DAL.ExamSysEntities db ...
- what we benefit from big data
大数据玩的是什么,趋势,故障,寿命? 物联网拉动的是终端厂商的销量,作为终端设备生产商(OEM).无论是汽车.手机.家电行业.最有理由推动物联网的普及,可是作为传统行业,玩"网"并 ...
- 【SSH2框架（理论篇）】--SSH2 Vs 经典三层
这几天一直在学习使用SSH2框架.对于框架本身的使用并非非常困难.相信经过多锻炼就行熟练的掌握框架的使用,让我匪夷所思的是在使用框架的时候感觉非常熟悉,好像在哪里用过似得. 就在某次查看代码的时 ...
- 使用Struts2和jQuery EasyUI实现简单CRUD系统（五）——jsp,json,EasyUI的结合
这部分比較复杂,之前看过自己的同学开发一个选课系统的时候用到了JSON,可是一直不知道有什么用.写东西也没用到.所以没去学他.然后如今以这样的怀着好奇心,这是做什么用的,这是怎么用的.这是怎么结合的心 ...
- Linux 查找一个函数在哪调用
grep "function has" -R ThinkPHP
- Cocos2d-x3.0 RenderTexture(三)
.h #include "cocos2d.h" #include "cocos-ext.h" #include "ui/CocosGUI.h" ...
- 2015.05.11,外语,读书笔记-《Word Power Made Easy》 15 “如何谈论事情进展” SESSION 44
1. not the real McCoy simulate(['simjuleit] v. 假装,冒充,模仿,模拟)来自拉丁simulo,copy的意思.simulo本身派生自拉丁形容词simili ...
- h5-news_index
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdcAAABuCAIAAAD6VM6fAAAUEUlEQVR4nO2dfXRTZZ7Hfx735Z/lr9 ...