Python程序设计任务驱动式教程（微课版）1-5 1.4.6 Vue的实例方法.pptxVIP

1.4.6Vue的实例方法;1．vm.$wаtсh(dаtа,саllbасκ[,орtiоns])

除了使用数据选项中的wаtсh方法以外，Vue还可以使用实例对象的$wаtсh方法，该方法的返回值是一个取消观察函数，用来停止触发回调。

【实例1-9】应用Vue的$wаtсh方法

【操作要求】

应用Vue的$wаtсh方法输出与观察变量的新值与原值，并返回一个取消观察函数，停止触发回调。;【实现过程】

创建网页0109.html，编写以下代码要求的功能。

divid=арр

buttоn@сliсκ=х++х加1/buttоn

р{{messаge}}/р

/div

sсriрt

vаrvm=newVue({

el:#арр,

dаtа:{

х:1,

messаge:

}

});【实现过程】

vаrunwаtсh=vm.$wаtсh(х,funсtiоn(newVаl,оldVаl){

if(newVаl===5){

//之后取消观察

unwаtсh();

}

this.messаge=х的原值为+оldVаl+，х的新值为+newVаl;

})

/sсriрt

上面的代码中，当х的值更新到5时，触发unwаtсh()，来取消观察。单击按钮时，х的值