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 ...
随机推荐
- struct 模块解决 TCP黏包问题
首先来看一下产生黏包现象的一段代码: # server.py 服务端 import socket sk = socket.socket() sk.bind(('127.0.0.1',9000)) ...
- Git学习总结（11）——Git撤销操作详解
本文主要讨论和撤销有关的 git 操作.目的是让读者在遇到关于撤销问题时能够方便迅速对照执行解决问题,而不用去翻阅参数繁多的 git 使用说明. 一开始你只需了解大致功能即可,不必记住所有命令和具体参 ...
- SimpleDateFormat 格式化 解析
package chengbaoDemo; import java.text.DateFormat; import java.text.ParseException; import java.text ...
- [ASP.NET]asp.net动态加载用户控件
用户控件 // 用户控件源码 namespace wzjr.control { public partial class Topic : System.Web.UI.UserControl { pub ...
- [Tailwind] Style Elements on hover and focus with Tailwind’s State Variants
In this lesson, we learn how to target specific states of elements and apply styles only when those ...
- Oracle 11g 学习3——表空间操作
一.表空间概述 表空间是Oracle中最大的逻辑存储结构,与操作系统中的数据文件相相应: 基本表空间:一般指用户使用的永久性表空间,用于存储用户的永久性数据 暂时表空间: 主要用于存 ...
- 根据EXCEL模板填充数据
string OutFileName = typeName+"重点源达标率" + DateTime.Now.ToString("yyyy-MM-dd"); ...
- Swift - 分页菜单的实现（使用PagingMenuController库实现tab标签切换）
分页菜单(分段菜单)在许多 App 上都会用到.比如大多数新闻 App,如网易新闻.今日头条等,顶部都有个导航菜单.这个导航菜单是一组标签的集合,每个标签表示一个新闻类别,我们点击这个标签后下面就会切 ...
- Android: HowTo设置app不被系统kill掉
有一种方法可以设置app永远不会被kill,AndroidManifest.xml 中添加: android:persistent="true" 适用于放在/system/app下 ...
- 【转】SQL语句删除和添加外键、主键
--删除外键 语法:alter table 表名 drop constraint 外键约束名 如: alter table Stu_PkFk_Sc drop constraint FK_s alter ...