1.利用方法实现
效果图
<!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>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<h2>普通方法</h2>
<input type="number" placeholder="请输入第一个数" v-model.number="number1"> <!--利用双向绑定第一个数-->
<select v-model="opt"> <!--多选标签,给符号定一个双向绑定-->
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="number" placeholder="请输入第二个数" v-model.number="number2"> <!--利用双向绑定第二个数-->
<button @click="jisuan()">计算</button> <!--绑定一个点击事件,计算两个数的结果-->
<br>
<div class="result">
结果为:{{result}} <!--用一个result接收两个数的计算结果-->
</div>
</div>
<script>
const vm = new Vue({
el: '#root', //指定id为root的容器
data: { //存放所用的数据,第一个数,运算符号,第二个数,计算结果
number1: '',
opt: '+',
number2: '',
result: ''
},
methods: {
jisuan() {
//这里是点击事件所用方法,利用switch判断语句,小括号内写表达式,把表达式的值与每个 case 的值进行对比,如果存在匹配,则执行关联代码
switch (this.opt) {
case '+':
this.result = this.number1 + this.number2; //此处返回两个数的和
break;
case '-':
this.result = this.number1 - this.number2; //此处返回两个数的差
break;
case '*':
this.result = this.number1 * this.number2; //此处返回两个数的乘积
break;
case '/':
this.result = this.number1 / this.number2; //此处返回两个数的商
break;
}
}
}
})
</script>
</body>
</html>
普通方法直接在methods里定义一个名为jisuan()的计算方法,在页面中直接调用该方法即可。
2.侦听器实现
效果图
<!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>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<h2>使用侦听器</h2>
<input type="number" placeholder="请输入第一个数" v-model.number="number1"> <!--利用双向绑定第一个数-->
<select v-model="opt"> <!--多选标签,给符号定一个双向绑定-->
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="number" placeholder="请输入第二个数" v-model.number="number2">
<!--利用双向绑定第二个数-->
<br>
<div class="result">
结果为:{{result}}<!--用一个result接收两个数的计算结果-->
</div>
</div>
<script>
const vm = new Vue({
el: '#root', //指定id为root的容器
data: { //存放所用的数据,第一个数,运算符号,第二个数,计算结果
number1: '',
opt: '+',
number2: '',
result: '',
},
watch: {
number1(newValue) {
//此处监听第1个数,因此在返回值的时候要把原有的旧值替换为小括号内的新值newValue
switch (this.opt) {
//这里是点击事件所用方法,利用switch判断语句,小括号内写表达式,把表达式的值与每个 case 的值进行对比,如果存在匹配,则执行关联代码
case '+':
this.result = newValue + this.number2;
break;
case '-':
this.result = newValue - this.number2;
break;
case '*':
this.result = newValue * this.number2;
break;
case '/':
this.result = newValue / this.number2;
break;
}
},
number2(newValue) {
//此处监听第2个数,因此在返回值的时候要把原有的旧值替换为小括号内的新值newValue
switch (this.opt) {
case '+':
this.result = this.number1 + newValue;
break;
case '-':
this.result = this.number1 - newValue;
break;
case '*':
this.result = this.number1 * newValue;
break;
case '/':
this.result = this.number1 / newValue;
break;
}
},
opt(newValue) {
//此处监听运算符号,这里只需要switch语句中小括号内的旧值改为newValue即可
switch (newValue) {
case '+':
this.result = this.number1 + this.number2;
break;
case '-':
this.result = this.number1 - this.number2;
break;
case '*':
this.result = this.number1 * this.number2;
break;
case '/':
this.result = this.number1 / this.number2;
break;
}
}
}
})
</script>
</body>
</html>
利用侦听器主要就是监视data数据中属性的变化,当数据发生变化时,会调用侦听器中的对应的方法,侦听器函数,会接收两个参数,第一个参数为newVal(被改变的数据),第二个参数为oldVal(赋值新值之前的值)。如在上述代码中,将侦听器watch更改一下,在我们代码里不需要接受第二个参数,即旧的值,只需接受第一个新的值即可
3.计算属性实现
效果图
<!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>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<h2>使用计算属性</h2>
<input type="number" placeholder="请输入第一个数" v-model.number="number1"> <!--利用双向绑定第一个数-->
<select v-model="opt"> <!--多选标签,给符号定一个双向绑定-->
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="number" placeholder="请输入第二个数" v-model.number="number2"> <!--利用双向绑定第二个数-->
<br>
<div class="result">
第一个数:{{number1}}<br>
第二个数:{{number2}}<br>
结果:{{result}} <!--用一个result接收两个数的计算结果-->
</div>
</div>
<script>
const vm = new Vue({
el: '#root', //指定id为root的容器
data: { //存放所用的数据,第一个数,运算符号,第二个数,计算结果
number1: '',
opt: '+',
number2: '',
},
computed:{
//此处运用计算属性
result(){
//在计算属性的方法当中可用return直接返回结果,不用再使用this.xxx去接收结果
switch (this.opt) {
//计算属性内必须要有返回值,这里可直接返回两个数的计算结果
case '+':
return this.number1 + this.number2;
break;
case '-':
return this.number1 - this.number2;
break;
case '*':
return this.number1 * this.number2;
break;
case '/':
return this.number1 / this.number2;
break;
}
}
}
})
</script>
</body>
</html>
methods和computed的区别:methods不会进行缓存,如果多次使用会调用多次。计算属性会进行缓存,如果多次使用,计算属性只会调用一次。使用计算属性时,必须有一个返回值