【vue学习】 computed、watch属性
【vue学习】 computed、watch属性
Swingz
发布于 2020-12-18 03:15:45
发布于 2020-12-18 03:15:45
代码可运行
运行总次数：0
代码可运行
【vue学习】 computed和watch
computed 计算属性
- 一些常用的函数，可以缓存起来，在调用时直接使用缓存中的过程(结果)，以此来提高效率。
- 注意：computed里虽然存放的是函数，但是在调用时，computed里的东西是一个属性。
- 代码:
<body>
<div id="app">
{{getCurrentTime()}}
<br>
{{getCurrentTime1}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var v1 = new Vue({
el:"#app",
methods:{
getCurrentTime:function(){
return new Date();
}
},
computed:{
getCurrentTime1:function(){
return new Date();
}
}
})
</script>
</body>watch 监控属性
- 通过watch里给属性绑定函数，当属性的值发生变化时，该函数就会自动被调用。调用时可以接受两个参数，第一个参数是属性变化后的值，第二个参数是属性变化前的值。
- 代码
<body>
<div id="app">
<input type="text" v-model="title" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var v1 = new Vue({
el:"#app",
data:{
title:"hello vue"
},
watch:{
// title改变就换执行方法
title:function(newValue,oldValue){
console.log(newValue+" :"+oldValue);
}
}
})
</script>
</body>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/09/29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
