推荐设备MORE

静态网页制作

静态网页制作

疑难问题

社区团购微信小程序_vue上钩算属性(computed)、

日期:2021-01-11
我要分享
puted)、methods和watched之间的区别       puted)、methods和watched之间区别的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。

前言

计算属性

和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变。

Methods

methods是方法,只要调用它,函数就会执行。

相同:两者达到的效果是同样的。

不同:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职。只要相关依赖未改变,只会返回之前的结果,不再执行函数。

 p 原始数据:{{msg}} /p 
 p 改变后的数据:{{changemsg}} /p 
var vm=new Vue({ 
 span /span el:"#example", 
 data:{ 
 span /span msg:"hello", 
 span /span }, 
 span /puted:{ 
 changemsg:function(){ 
 return this.msg.split("").reverse().join(""); 
} 

computed属性  VS watched 属性

watched属性:代码更易于理解,它指定监测的值是谁,然后相应的改变其他的值。

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 watch: {
 firstName: function (val) {
 this.fullName = val + ' ' + this.lastName
 lastName: function (val) {
 this.fullName = this.firstName + ' ' + val
})

computed属性:代码更简单。

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 computed: {
 fullName: function () {
 return this.firstName + ' ' + this.lastName
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者使用shell能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对凡科的支持。