vue-项目试手(1) 计算器（2）获取结果
还有一些细节处理不细说。基本都是字符串处理
处理结果函数编写
calc(){
//替换算符
const strValue=this.resultValue.replace('x','*').replace('÷','/')
//计算
this.resultValue=eval(strValue)
}
总体代码
基本上最复杂的就是字符串处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>迷你计算器</title>
<style>
body{
margin: 20px;
}
#app{
border: 1px solid #ccc;
border-radius: 4px;
width: 175px;
height: 285px;
padding: 10px;
}
#input-box{
width: 161px;
margin-bottom: 10px;
height: 30px;
border: 1px solid #ccc;
border-radius: 2px;
background-color: white;
color: #666;
padding: 0 5px;
text-align: right;
}
#app .btn{
width: 40px;
height: 35px;
border: 1px solid #ccc;
border-radius: 2px;
cursor: pointer;
background-color: white;
font-weight: bold;
color: #666;
margin-bottom: 10px;
}
#app .btn:hover{
background-color: #333;
color: white;
}
#app .btn-double{
width: 84px;
}
</style>
</head>
<body>
<div id="app">
<result-box :get-value="resultValue"></result-box>
<calc-box>
<button class="btn" @click="clear">C</button>
<button class="btn" @click="sign">+/-</button>
<button class="btn" @click="symbol('x')">x</button>
<button class="btn" @click="symbol('÷')">÷</button>
<button class="btn" @click="input('1')">1</button>
<button class="btn" @click="input('2')">2</button>
<button class="btn" @click="input('3')">3</button>
<button class="btn" @click="symbol('-')">-</button>
<button class="btn" @click="input('4')">4</button>
<button class="btn" @click="input('5')">5</button>
<button class="btn" @click="input('6')">6</button>
<button class="btn" @click="symbol('+')">+</button>
<button class="btn" @click="input('7')">7</button>
<button class="btn" @click="input('8')">8</button>
<button class="btn" @click="input('9')">9</button>
<button class="btn" @click="symbol('%')">%</button>
<button class="btn" @click="input('0')">0</button>
<button class="btn" @click="point()">.</button>
<button class="btn btn-double" @click="calc">=</button>
</calc-box>
</div>
<script src="../js/vue.js"></script>
<script>
//计算器结果框组件
const resultBox={
//父子通信
props:['getValue'],
//计算属性
computed:{
value(){
return this.getValue;
}
},
template:`
<input id="input-box" type="text" v-model="value" readonly>
`
}
//计算器输入组件面板组件
const calcBox={
template:`
<div id="calc-box">
<slot></slot>
</div>
`
}
const app =new Vue({
el:'#app',
data:{
resultValue:0
},
//组件
components:{
//计算器结果框组件
'result-box':resultBox,
//计算器输入组件面板组件
'calc-box': calcBox
},
methods:{
input(params){
//拒绝重复0,并且防止0.x 被当0处理
if(parseInt(this.resultValue)===0 && !/0[\.|\s]/.test(this.resultValue)){
//转化成数字是0 就直接替换掉
this.resultValue=params
}
else {
this.resultValue+=params
}
},
//加减乘除算术公式
symbol(params){
this.resultValue+=' '+params+' '
},
//正负号设置
sign(){
const strValue=this.toStr()
//得到最后一位数值
let lastNumber=strValue.substring(strValue.lastIndexOf(' '))
//得到之前的数值+符号
let preNumber=strValue.substr(0,strValue.lastIndexOf(' '))
//判断是否有负号
if(lastNumber.indexOf('-')===-1){
lastNumber=' -'+lastNumber.trim()
}
else {
lastNumber=' '+lastNumber.trim().substr(1)
}
this.resultValue=preNumber+lastNumber
},
//处理小数点
point(){
const strValue=this.toStr()
//得到最后一位数值
const lastNumber=strValue.substring(strValue.lastIndexOf(' '))
//判断是否有小数点
if(lastNumber.indexOf('.')!==-1){
return
}
else{
this.resultValue+='.'
}
},
//转化成字符串
toStr(){
return this.resultValue.toString()
},
clear(){
this.resultValue='0'
},
//处理结果
calc(){
//替换算符
const strValue=this.resultValue.replace('x','*').replace('÷','/')
//计算
this.resultValue=eval(strValue)
}
}
})
</script>
</body>
</html>
效果:
