第八章 watch监听 85 computed-计算属性的使用和3个特点
<!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="middlename">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname"> <p>{{fullname}}</p>
<p>{{fullname}}</p>
<p>{{fullname}}</p>
</div> <script>
//创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
firstname:'',
lastname:'',
middlename:''
},
methods:{},
computed:{ //在computed中，可以定义一些 属性，这些属性，叫做【计算属性】，计算属性的本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把它们的名称，直接当作 属性来使用；并不会把计算属性，当作方法去调用； //注意1：计算属性，在引用的时候，一定不要加()去调用，直接把它当作 普通属性去使用就好了；
//注意2：只要计算属性，这个function内部，所用到的任何 data中的数据发生了变化，就会立即重新计算 这个计算属性的值
//注意3：计算属性的求值结果，会被缓存起来，方便下次直接使用；如果 计算属性方法所依赖的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；
'fullname':function(){
console.log('ok')
return this.firstname+'-'+this.middlename+'-'+this.lastname
}
}
});
</script>
</body>
</html>
第八章 watch监听 85 computed-计算属性的使用和3个特点的更多相关文章
- vue computed计算属性和watch监听属性解疑答惑
computed计算属性 计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...
- vue computed计算属性 watch监听
计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...
- Vue的computed计算属性是如何实现的
一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...
- Vue之computed计算属性
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...
- Vue（七）：computed计算属性
简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- computed 计算属性
wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=wepy%e9%a1%b9%e7%9b%ae%e7%9a%8 ...
- iOS 监听控件某个属性的改变observeValueForKeyPath
创建一个测试的UIButton #import "ViewController.h" @interface ViewController () @property(nonatomi ...
随机推荐
- 关于python脚本头部设置#!/usr/bin/python
今天又是贼几把菜的一天0.0 读别人程序的时候看到在python文件头部设置签名,感觉贼几把酷,自己也试着在文件前段设置了一下. 设置还是蛮简单的,设置过程如图所示. 设置后如图所示: 当然你也可能看 ...
- 剑指offer_斐波那契数列
package solution; public class Fibonacci { /* * f(n) = f(n-1) + f(n-2) n>1 * f(0) = 0 * f(1) = 1 ...
- lua的table库中的常用函数总结
table是Lua语言中的一种重要的数据类型, table 的一些特性简单列举如下: (1).table 是一个“关联数组”,数组的索引可以是数字或者是字符串; (2).table 的默认初始索引一般 ...
- 2019牛客暑期多校训练营（第八场）-A All-one Matrices (单调栈+前缀和)
题目链接:https://ac.nowcoder.com/acm/contest/888/A 题意:给n×m的01矩阵,求出其中全为1的矩阵个数(不被其它全1矩阵包括). 思路:和第二场多校的次大子矩 ...
- [bzoj1775][Usaco2009 Dec]Vidgame 电视游戏问题_背包dp
1775: [Usaco2009 Dec]Vidgame 电视游戏问题 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1775 题解: 发 ...
- NIKKEI Programming Contest 2019-2 Task D. Shortest Path on a Line
Observations ① 从 $1$ 到 $N$ 的最短路一定是不走回头路的.所谓走回头路是指从序号大的点走到序号小的点. 证明:首先,任意从 $1$ 到 $N$ 的路径的最后一步一定不是回头路. ...
- 【求教 探讨】python tkinter的messagebox
最近有一个要求,用python的tkinter制作一个messagebox,传入3个参数: title text timeout.用户可以点击“确定” 关闭窗口: 或者 等待几秒(timeout) ...
- 句子反转——牛客刷题（java）
题目描述: 给定一个句子(只包含字母和空格), 将句子中的单词位置反转,单词用空格分割, 单词之间只有一个空格,前后没有空格. 比如: (1) “hello xiao mi”-> “mi xia ...
- nginx + uwsgi 部署django项目
因项目需求,需要部署django项目,这里是基础的nginx配合uwsgi部署django,后续会采用docker部署的方式 环境: centos7 python3.5.4 django2.1.4 u ...
- Java 日志系统
Java 日志系统 1. 创建日志记录器 private final Logger logger = LoggerFactory.getLogger(LoggerTest.class); 2. 打印日 ...