在Vue.js中，同样的效果可以使用不同的手段来实现，比如下面的计算：
为了练习功能，没有做其他的判断比如除数是否为0或者输入了字母等，只是简单地通过方法、计算属性或者监听来实现两个数的相除。
一、使用方法来做：
方法、计算属性和监听_方法
请输入被除数：
请输入除数：
两数相除结果：{{divResult()}}
//声明数据对象
const vueDataObj={
add1:1,
add2:2,
};
//声明方法
var methods={
divResult(){
var result=this.add1/this.add2;
return result;
}
};
//创建vue对象
const vueApp=new Vue({
el:'#demo',
data:vueDataObj,
methods,
computed:{}
});
二、使用计算属性来做：
方法、计算属性和监听_计算属性
请输入被除数：
请输入除数：
两数相除结果：{{divResult}}
//声明数据对象
const vueDataObj={
add1:1,
add2:2,
};
//声明方法
var methods={
};
//声明计算属性
var computed={
divResult(){
var result=this.add1/this.add2;
return result;
}
};
//创建vue对象
const vueApp=new Vue({
el:'#demo',
data:vueDataObj,
methods,
computed,
});
可以看到，使用方法和计算属性的差别并不大，只是函数移动了一个位置和是否加“()”的差异，可以加参数。
三、使用监听来做，稍微有变化，有点麻烦。
实现监听①：
方法、计算属性和监听_监听1
请输入被除数：
请输入除数：
两数相除结果：{{divResult}}
//声明数据对象
const vueDataObj={
add1:1,
add2:2,
divResult:0.5,
};
//声明方法
var methods={
};
//声明计算属性
var computed={
};
//声明监听
var watch={
add1(val,oldval){
this.divResult=this.add1/this.add2;
},
add2(val,oldval){
this.divResult=this.add1/this.add2;
}
};
//创建vue对象
const vueApp=new Vue({
el:'#demo',
data:vueDataObj,
methods,
computed,
watch,
});
为了实现计算，必须监听两个数据字段，也可以在代码上做下面的变通。
实现监听②：
方法、计算属性和监听_监听2
请输入被除数：
请输入除数：
两数相除结果：{{divResult}}
//声明数据对象
const vueDataObj={
add1:1,
add2:2,
divResult:0.5,
};
//声明方法
var methods={
divCalc(val,oldval){
this.divResult=this.add1/this.add2;
}
};
//声明计算属性
var computed={
};
//声明监听
var watch={
calc:'divCalc'
};
//创建vue对象
const vueApp=new Vue({
el:'#demo',
data:vueDataObj,
methods,
computed,
watch,
});
如果要是数据对象，那么实现上就有特别的写法，有些参数必须加上。
实现监听③：
方法、计算属性和监听_监听3
请输入被除数：
请输入除数：
两数相除结果：{{calcData.divResult}}
//声明数据对象
const vueDataObj={
tips:'',//提示信息
calcData:{
add1:1,
add2:2,
divResult:0.5,
},
};
//声明方法
var methods={
calc(calcObj){
calcObj.divResult=calcObj.add1/calcObj.add2;
}
};
//声明计算属性
var computed={
};
//声明监听
var watch={
calcData:{
handler:'calc',
deep:true,//深度监听
immediate:true,//有初始值
},
};
//创建vue对象
const vueApp=new Vue({
el:'#demo',
data:vueDataObj,
methods,
computed,
watch,
});
如果需要同时监听多个对象怎么办？可以如下的方式进行：
实现监听④：
方法、计算属性和监听_监听4
请输入被除数：
请输入除数：
两数相除结果：{{calcData.divResult}}
//声明数据对象
const vueDataObj={
tips:'',//提示信息
calcData:{
add1:1,
add2:2,
divResult:0.5,
},
};
//声明方法
var methods={
calcAdd1(calcObj){
calcObj.divResult=calcObj.add1/calcObj.add2;
},
calcAdd2(calcObj){
calcObj.divResult=calcObj.add1/calcObj.add2;
},
};
//声明计算属性
var computed={
};
//声明监听
var watch={
calcData:[{
handler:'calcAdd1',
deep:true,//深度监听
immediate:true,//有初始值
},{
handler:'calcAdd2',
deep:true,//深度监听
immediate:true,//有初始值
}]
};
//创建vue对象
const vueApp=new Vue({
el:'#demo',
data:vueDataObj,
methods,
computed,
watch,
});
