Vue之computed与watch的使用
<!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>
</head>
<body>
<div id="ex-computed">
<p>Original message: "{{ message}}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<div id="ex-watch">
我是练习watch的div
<input type="number" v-model="num" />
<p v-if='isOK'>两次差值已大于3，所以你看见我了～</p>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
/* 计算属性computed的用途：
模板内的表达式是便利的，但是为了方便维护，复杂的逻辑就不应该
直接放在表达式里，而应当使用计算属性。
*/
/* computed vs 方法：
下面的例子也可以定义方法，然后在表达式中调用方法来达到同样的效果。
不同的是：computed是基于它们的响应式依赖进行缓存的，在下面的例子中，
只要message没有发生改变那么多次访问reversedMessage会立即返回之前
计算的结果，使用缓存可以提高系统的性能，减少重复开销。
*/
var vm = new Vue({
el: '#ex-computed',
data: {
message: 'Hello'
},
computed: {
// 默认情况下只提供了计算属性的getter
reversedMessage: function() {
// this执行该vm实例
return this.message.split('').reverse()
.join('')
}
}
});
/* computed VS watch:
Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性（watch）
，watch侦听属性应该用于要从旧状态到新状态这变化过程中获取到信息或进行操作的行为，
而不应该滥用，因为在大多数情况下，使用computed或许更加合适。下面这个例子是合理使用watch的一个例子：
*/
var vm2 = new Vue({
el: "#ex-watch",
data: {
num: 1,
isOK: false
},
watch: {
num: function(newNum, oldNum) {
console.log(newNum);
if (newNum - oldNum > 3) {
this.isOK = true;
} else {
this.isOK = false;
}
}
}
})
</script>
</body>
</html>
Vue之computed与watch的使用的更多相关文章
- vue的computed属性
vue的computed属性要注意的两个地方,1,必须有return,2,使用属性不用括号 <div> <input type="text" v-model=&q ...
- Vue的Computed的使用
Vue的Computed的使用 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
- Vue中computed和watch的区别
在vue中computed和watch的真正区别是:computed产生于它的依赖,而watch产生于它的依赖的变化.只要依赖存在,我们就能访问到其对应的computed属性:但只有依赖发生了改变,我 ...
- Vue中computed分析
Vue中computed分析 在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...
- vue 的 computed 属性在什么时间执行
vue 的 computed 属性在什么时间执行
- vue中computed的作用以及用法
在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...
- 关于vue的computed、filters、watch
filters 这个属性大家可能用的不是很多 因为一般的数组过滤我们用 es6的filter就能完成了 我想到一个场景,网上买书促销 满100减50 满两百减100 <input type=&q ...
- 【Vue】----- computed与watch的区别
1.computed computed是一种计算属性,用来监听属性的变化: computed里面的方法调用的时候不需要加(),并且里面的方法必须要有一个返回值: computed里面的方法不是通过事件 ...
- vue中computed计算属性与methods对象中的this指针
this 指针问题 methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢? 因为new Vue对象实例化后data中的成员和c ...
随机推荐
- Asp.net MVC 使用PagedList（新的已更名 为X.PagedList.Mvc） 分页
在asp.net mvc 中,可以bootstrap来作为界面,自己来写分页程序.也可以使用PagedList(作者已更名为 X.PagedList.Mvc)来分页. 1.首先,在NuGet程序包管理 ...
- 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时12&&13
课时12 神经网络训练细节part2(上) 训练神经网络是由四步过程组成,你有一个完整的数据集图像和标签,从数据集中取出一小批样本,我们通过网络做前向传播得到损失,告诉我们目前分类效果怎么样.然后我们 ...
- 看鸟哥的Linux私房菜的一些命令自我总结（三）
-修改文件创建时间或创建新文件 touch [-acdmt] -a :仅修改访问时间 -c :仅修改文件的时间,若该文件不存在则不创建新文件 -d :后面可以接想要修改的日期而不用当前的日期 - ...
- 个人项目开发PSP实践-MyWCprj
MyWCprj.exe Github仓库地址 1. What is MyWCprj.exe? wc是linux下一个非常好用的代码统计小工具,可以通过 -c .-w .-l等选项分别进行对指定文件的代 ...
- E20180418-hm
utility n. [计]工具; 公用事业; 功用,效用; 有用的物体或器械; 公用事业公司; identity n. 身份; identifier n. 识别符; 检验人,标识符; 鉴别器; 编 ...
- 51nod1256【exgcd求逆元】
思路: 把k*M%N=1可以写成一个不定方程,(k*M)%N=(N*x+1)%N,那么就是求k*M-N*x=1,k最小,不定方程我们可以直接利用exgcd,中间还搞错了: //小小地讲一下exgcd球 ...
- bzoj 4446: [Scoi2015]小凸玩密室【树形dp】
神仙题!参考https://www.cnblogs.com/wfj2048/p/7695711.html 注意完全二叉树不是满二叉树!!!! 设g[u][j]为u遍历完子树到深度为i-1的祖先的兄弟的 ...
- IT兄弟连 JavaWeb教程 Servlet
Servlet的定义 Java Servlet是运行在Web服务器或应用服务器上的程序,它是作为来自Web浏览器或其他HTTP客户端的请求和HTTP服务器上的数据库或应用程序之间的中间层. 使用Ser ...
- JAVA多线程(一) Thread & Runnable
githut代码地址:https://github.com/showkawa/springBoot_2017/tree/master/spb-demo/spb-brian-query-service/ ...
- apcloud混合式开发app学习笔记
修改图标新建项目检出到本地--------------------------1.api.ajax var loginName = $api.val($api.byId('uname')); var ...