在Vue.js中，同样的效果可以使用不同的手段来实现，比如下面的计算：
为了练习功能，没有做其他的判断比如除数是否为0或者输入了字母等，只是简单地通过方法、计算属性或者监听来实现两个数的相除。?
一、使用方法来做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方法、计算属性和监听_方法</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<div>
请输入被除数：<input type="text" v-model="add1"/>
</div>
<div>
请输入除数：<input type="text" v-model="add2"/>
</div>
<div>两数相除结果：{{divResult()}}</div>
</div>
<script>
//声明数据对象
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:{}
});
</script>
</body>
</html>二、使用计算属性来做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方法、计算属性和监听_计算属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<div>
请输入被除数：<input type="text" v-model="add1"/>
</div>
<div>
请输入除数：<input type="text" v-model="add2"/>
</div>
<div>两数相除结果：{{divResult}}</div>
</div>
<script>
//声明数据对象
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,
});
</script>
</body>
</html>可以看到，使用方法和计算属性的差别并不大，只是函数移动了一个位置和是否加“()”的差异，可以加参数。
三、使用监听来做，稍微有变化，有点麻烦。
实现监听①：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方法、计算属性和监听_监听1</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<div>
请输入被除数：<input type="text" v-model="add1"/>
</div>
<div>
请输入除数：<input type="text" v-model="add2"/>
</div>
<div>两数相除结果：{{divResult}}</div>
</div>
<script>
//声明数据对象
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,
});
</script>
</body>
</html>为了实现计算，必须监听两个数据字段，也可以在代码上做下面的变通。
实现监听②：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方法、计算属性和监听_监听2</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<div>
请输入被除数：<input type="text" v-model="add1"/>
</div>
<div>
请输入除数：<input type="text" v-model="add2"/>
</div>
<div>两数相除结果：{{divResult}}</div>
</div>
<script>
//声明数据对象
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,
});
</script>
</body>
</html>
如果要是数据对象，那么实现上就有特别的写法，有些参数必须加上。
实现监听③：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方法、计算属性和监听_监听3</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<div>
请输入被除数：<input type="text" v-model="calcData.add1"/>
</div>
<div>
请输入除数：<input type="text" v-model="calcData.add2"/>
</div>
<div>两数相除结果：{{calcData.divResult}}</div>
</div>
<script>
//声明数据对象
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,
});
</script>
</body>
</html>
如果需要同时监听多个对象怎么办？可以如下的方式进行：
实现监听④：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方法、计算属性和监听_监听4</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<div>
请输入被除数：<input type="text" v-model="calcData.add1"/>
</div>
<div>
请输入除数：<input type="text" v-model="calcData.add2"/>
</div>
<div>两数相除结果：{{calcData.divResult}}</div>
</div>
<script>
//声明数据对象
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,
});
</script>
</body>
</html>