全部代码
方法
<!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 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="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="line1">{{number1}}+{{number2}}={{number1 + number2}}</p>
<p v-show="line2">{{number1}}-{{number2}}={{number1 - number2}}</p>
<p v-show="line3">{{number1}}*{{number2}}={{number1 * number2}}</p>
<p v-show="line4">{{number1}}/{{number2}}={{number1 / number2}}</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"+",
line1:false,
line2:false,
line3:false,
line4:false
},
methods: {
m1() {
if (this.opt === "+") {
this.line1 = true;
this.line2 = false;
this.line3 = false;
this.line4 = false;
} else if (this.opt === "-") {
this.line1 = false;
this.line2 = true;
this.line3 = false;
this.line4 = false;
} else if (this.opt === "*") {
this.line1 = false;
this.line2 = false;
this.line3 = true;
this.line4 = false;
} else {
this.line1 = false;
this.line2 = false;
this.line3 = false;
this.line4 = 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" 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>
代码实现
方法
布局
1.布局使用一个div里面套两个input输入框同时使用v-model.number绑定
2.v-model.number表示将值转换为数字
<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来给number赋值
<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>
表达式方法
布局
1.布局使用一个div里面套两个input输入框同时使用v-model.number绑定
2.加一个select标签来写运算符并用v-model绑定
3.加入一个p标签 用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="line1">{{number1}}+{{number2}}={{number1 + number2}}</p>
<p v-show="line2">{{number1}}-{{number2}}={{number1 - number2}}</p>
<p v-show="line3">{{number1}}*{{number2}}={{number1 * number2}}</p>
<p v-show="line4">{{number1}}/{{number2}}={{number1 / number2}}</p>
</div>
vue部分
1.创建四个自定义变量来控制p标签的显示
2.在methods里面写一个方法m1
3.在m1里面用if else来判断运算符
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"+",
line1:false,
line2:false,
line3:false,
line4:false
},
methods: {
m1() {
if (this.opt === "+") {
this.line1 = true;
this.line2 = false;
this.line3 = false;
this.line4 = false;
} else if (this.opt === "-") {
this.line1 = false;
this.line2 = true;
this.line3 = false;
this.line4 = false;
} else if (this.opt === "*") {
this.line1 = false;
this.line2 = false;
this.line3 = true;
this.line4 = false;
} else {
this.line1 = false;
this.line2 = false;
this.line3 = false;
this.line4 = true;
}
}
}
})
</script>
计算属性
布局
1.布局使用一个div里面套两个input输入框同时使用v-model.number绑定
<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>
vue
<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>
侦听器
<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>
vue
<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>
到这里整篇文章就结束了,如果有错误的地方还请见谅!