全部代码
表达式方法
<!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="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt" >
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<button @click="m1" >计算</button>
<br />
<p v-show="xianshi1">{{number1}}+{{number2}}={{number1 + number2}}</p>
<p v-show="xianshi2">{{number1}}-{{number2}}={{number1 - number2}}</p>
<p v-show="xianshi3">{{number1}}*{{number2}}={{number1 * number2}}</p>
<p v-show="xianshi4">{{number1}}/{{number2}}={{number1 / number2}}</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"+",
xianshi1:false,
xianshi2:false,
xianshi3:false,
xianshi4:false
},
methods: {
m1() {
if (this.opt === "+") {
this.xianshi1 = true;
this.xianshi2 = false;
this.xianshi3 = false;
this.xianshi4 = false;
} else if (this.opt === "-") {
this.xianshi1 = false;
this.xianshi2 = true;
this.xianshi3 = false;
this.xianshi4 = false;
} else if (this.opt === "*") {
this.xianshi1 = false;
this.xianshi2 = false;
this.xianshi3 = true;
this.xianshi4 = false;
} else {
this.xianshi1 = false;
this.xianshi2 = false;
this.xianshi3 = false;
this.xianshi4 = true;
}
}
}
})
</script>
</html>
计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt" >
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<br />
结果:{{change}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"*",
number3:"",
},
computed:{
change(){
if(this.opt == "+"){
return this.number1+this.number2
}
if(this.opt == "-"){
return this.number1-this.number2
}
if(this.opt == "*"){
return this.number1*this.number2
}
if(this.opt == "/"){
return this.number1/this.number2
}
}
}
})
</script>
</html>
方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt" >
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<button @click="change" >计算</button>
<br />
结果:<input type="text" v-model="number3" />
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"*",
number3:"",
},
methods:{
change(){
if(this.opt == "+"){
this.number3 = this.number1+this.number2
}
if(this.opt == "-"){
this.number3 = this.number1-this.number2
}
if(this.opt == "*"){
this.number3 = this.number1*this.number2
}
if(this.opt == "/"){
this.number3 = this.number1/this.number2
}
}
}
})
</script>
</html>
侦听器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1"/>
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<br />
结果:{{number3}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"+",
number3:0
},
watch:{
number1(){
if(this.opt == "+"){
this.number3 = this.number1+this.number2
}
if(this.opt == "-"){
this.number3 = this.number1-this.number2
}
if(this.opt == "*"){
this.number3 = this.number1*this.number2
}
if(this.opt == "/"){
this.number3 = this.number1/this.number2
}
},
number2(){
if(this.opt == "+"){
this.number3 = this.number1+this.number2
}
if(this.opt == "-"){
this.number3 = this.number1-this.number2
}
if(this.opt == "*"){
this.number3 = this.number1*this.number2
}
if(this.opt == "/"){
this.number3 = this.number1/this.number2
}
},
opt(){
if(this.opt == "+"){
this.number3 = this.number1+this.number2
}
if(this.opt == "-"){
this.number3 = this.number1-this.number2
}
if(this.opt == "*"){
this.number3 = this.number1*this.number2
}
if(this.opt == "/"){
this.number3 = this.number1/this.number2
}
}
}
})
</script>
</html>
实现效果
表达式
屏幕录制 2023-04-01 162330
方法
屏幕录制 2023-04-01 163808
侦听器、计算属性
屏幕录制 2023-04-01 163857
代码实现
表达式
布局
- 布局我们使用一个div里面套两个input输入框同时使用v-model.number绑定
- v-model.number 表示将表单元素的值转换为数字类型
- 然后再加一个select标签来写运算符并用v-model绑定
- 再加入1个p标签来写表达式并于v-show来控制那个表达式显示
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt" >
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<button @click="m1" >计算</button>
<br />
<p v-show="xianshi1">{{number1}}+{{number2}}={{number1 + number2}}</p>
<p v-show="xianshi2">{{number1}}-{{number2}}={{number1 - number2}}</p>
<p v-show="xianshi3">{{number1}}*{{number2}}={{number1 * number2}}</p>
<p v-show="xianshi4">{{number1}}/{{number2}}={{number1 / number2}}</p>
</div>
vue部分
- 首先我们先引入vue
- 然后我们写三个自定义变量来绑定输入值和运算符
- 在创建4个自定义变量来控制p标签的显示
- 再在methods里面写一个方法m1
- 在m1里面写if else来判断运算符
- 通过判断来决定表达式的显示
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"+",
xianshi1:false,
xianshi2:false,
xianshi3:false,
xianshi4:false
},
methods: {
m1() {
if (this.opt === "+") {
this.xianshi1 = true;
this.xianshi2 = false;
this.xianshi3 = false;
this.xianshi4 = false;
} else if (this.opt === "-") {
this.xianshi1 = false;
this.xianshi2 = true;
this.xianshi3 = false;
this.xianshi4 = false;
} else if (this.opt === "*") {
this.xianshi1 = false;
this.xianshi2 = false;
this.xianshi3 = true;
this.xianshi4 = false;
} else {
this.xianshi1 = false;
this.xianshi2 = false;
this.xianshi3 = false;
this.xianshi4 = true;
}
}
}
})
</script>
方法
布局
布局方面基本和表达式一样只有结果是通过input输入框用v-model绑定来输入的
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt" >
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<button @click="change" >计算</button>
<br />
结果:<input type="text" v-model="number3" />
</div>
vue部分
这里我们通过if来判断运算符,通过this来给number3赋值实现
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"*",
number3:"",
},
methods:{
change(){
if(this.opt == "+"){
this.number3 = this.number1+this.number2
}
if(this.opt == "-"){
this.number3 = this.number1-this.number2
}
if(this.opt == "*"){
this.number3 = this.number1*this.number2
}
if(this.opt == "/"){
this.number3 = this.number1/this.number2
}
}
}
})
</script>
计算属性、侦听器
布局方面都大差不差的我就不介绍了
计算属性vue
这里我们通过computed计算属性来写大致过程和方法大差不差只是结果是通过return来返回
script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"*",
number3:"",
},
computed:{
change(){
if(this.opt == "+"){
return this.number1+this.number2
}
if(this.opt == "-"){
return this.number1-this.number2
}
if(this.opt == "*"){
return this.number1*this.number2
}
if(this.opt == "/"){
return this.number1/this.number2
}
}
}
})
</script>
侦听vue
watch侦听器 通过绑定值的变化来执行只要变化就执行一次通过if来判断执行那个
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"+",
number3:0
},
watch:{
number1(){
if(this.opt == "+"){
this.number3 = this.number1+this.number2
}
if(this.opt == "-"){
this.number3 = this.number1-this.number2
}
if(this.opt == "*"){
this.number3 = this.number1*this.number2
}
if(this.opt == "/"){
this.number3 = this.number1/this.number2
}
},
number2(){
if(this.opt == "+"){
this.number3 = this.number1+this.number2
}
if(this.opt == "-"){
this.number3 = this.number1-this.number2
}
if(this.opt == "*"){
this.number3 = this.number1*this.number2
}
if(this.opt == "/"){
this.number3 = this.number1/this.number2
}
},
opt(){
if(this.opt == "+"){
this.number3 = this.number1+this.number2
}
if(this.opt == "-"){
this.number3 = this.number1-this.number2
}
if(this.opt == "*"){
this.number3 = this.number1*this.number2
}
if(this.opt == "/"){
this.number3 = this.number1/this.number2
}
}
}
})
</script>
我个人更推荐用计算属性简单方便,好了今天的分享就到这里,祝大家生活愉快!!!