计算器作业

<template>

<view>

<view class="content" style="background-color: #007AFF;width:100%;height: 80px;margin: 5px;">

{{title}}

</view>

<view style=" display: flex; flex-direction: row;margin: 5px;">

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="qingli">C</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="dianjiFG">√</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="diancheng">%</button>

<button style="width: 60px;height: 60px; font-size: 16px; background-color:#F0AD4E;"

@click="dianjiChu">退格</button>

</view>

<view style=" display: flex; flex-direction: row;margin: 5px;"">

<button style=" width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;" @click="dianji7">7</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="dianji8">8</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="dianji9">9</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="dianjijian">X</button>

</view>

<view style=" display: flex; flex-direction: row;margin: 5px;"">

<button style=" width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;" @click="dianji4">4</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="dianji5">5</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="dianji6">6</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="dianjijian">-</button>

</view>

<view style=" display: flex; flex-direction: row;margin: 5px;"">

<button style=" width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;" @click="dianji1">1</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="dianji2">2</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="dianji3">3</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="dianjijia">+</button>

</view>

<view style=" display: flex; flex-direction: row;margin: 5px;"">

<button style=" width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;" @click="dianji0">0</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="dianjidian">.</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="dianjideng">=</button>

<button style="width: 60px;height: 60px; font-size: 18px; background-color:#F0AD4E;"

@click="dianjienter">Enter</button>

</view>

</view>

</template>

<script>

export default {

data() {

return {

title: '',

shuju: [],

}

},

onLoad() {

},

methods: {

qingli() {

this.title = "";

this.shuju=[];

},

dianji7() {

this.title = 7;

},

dianji1() {

this.title = this.title + '1';

},

dianji2() {

this.title = this.title + '2';

},

dianjijia() {

this.shuju[this.shuju.length] = parseFloat(this.title);

this.title = '+';

// console.log(this.shuju);

},

dianjideng() {

this.shuju[this.shuju.length] = parseFloat(this.title);

//console.log(this.shuju.length);

var result = 0;

 

for (var i = 0; i < this.shuju.length; i++) {

result = (result + this.shuju[i]);

}

//console.log(result);

this.title = result;

this.shuju=[];

//console.log(this.shuju);

//this.shuju[0]=result;

}

}

}

</script>