10 vue中 v-model ，计算机demo

A *Ｂ＝Ｃ

Ａ／Ｂ＝Ｃ

基本逻辑是，　需要输入Ａ　和Ｂ　得到Ｃ　。　选择运算符。　点击＝　

所以页面布局分为几部分　

data: {
n1: 0, // A
n2: 0, //B
result: 0, //C
opt: '+' //运算符
},

Ａ：

<input type="text" value="" v-model="n1">　　 ,A用v-model 绑定n1

<input type="text" value="" v-model="n2">　　 ,B用v-model 绑定n2

根据以上代码情况。在methods中，写入方法calc 。由于是加减乘除格式，可以考虑2种方式

如下代码所示

methods: {
calc() { // 计算器算数的方法
// 逻辑：
switch (ths.opt) {
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2)
break;
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2)
break;
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2)
break;
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2)
break;
}
// 注意：这是投机取巧的方式，正式开发中，尽量少用
// eval ,将字符串解析执行拿到解析后的结果
var newStr =' parseInt(this.n1)' + this.opt + ' parseInt(this.n2)'
this.result = eval(newStr)
}
}

友情提示：不要忘记this哦！

来源：博客园

作者：执着的烙印

链接：https://www.cnblogs.com/maomao-Sunshine/p/11684782.html

标签

demo