v-model 实现两种计算器写法
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 第一个数 -->
<input type="text" v-model="a1" style="text-align: center;">
<!-- 加减乘除 -->
<select style="text-align: center; width: 50px;" v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<!-- 第二个数 -->
<input type="text" v-model="a2" style="text-align: center;">
<!-- 计算按钮 -->
<input type="button" value="=" @click="count">
<!-- 计算出来的结果 -->
<input type="text" v-model="requert" style="text-align: center;">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
// 每一个表单都给它一个初始值
a1:0,
a2:0,
opt:'-',
requert:'0',
},
// 封装一个方法,进行计算
// data数据里边的参数 到methods方法中 都得写this. 不然获取不到数据
methods:{
// es6写放法
count(){
// 逻辑 用到switch方法 和必须写整数 parseInt
// switch(this.opt){
// case '+' :
// this.requert = parseInt(this.a1) + parseInt(this.a2)
// break;
// case '-' :
// this.requert = parseInt(this.a1) - parseInt(this.a2)
// break;
// case '*' :
// this.requert = parseInt(this.a1) * parseInt(this.a2)
// break;
// case '/' :
// this.requert = parseInt(this.a1) / parseInt(this.a2)
// break;
// case '%' :
// this.requert = parseInt(this.a1) % parseInt(this.a2)
// break;
// }
// 第二种简介写计算器 尽量再项目中用eval
var codeStr = 'parseInt(this.a1)'+this.opt+'parseInt(this.a2)'
this.requert = eval(codeStr)
}
}
})
</script>
</body>
</html>