<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>

更多相关文章

1. 字体图标的引入和通过媒体查询改变导航样式
2. HTML样式和常用选择器
3. 字体图标的引用和自定义样式/媒体查询的使用
4. 数据库的CURD操作、PDO本质与原理的学习
5. CSS之伪类选择器和简单盒子简单案例
6. 伪类选择器与盒模型常用属性
7. 伪类选择器-结构伪类、根据位置选择匹配
8. 7.4——常用标签与应用场景之表格与单元格
9. css伪类选择器和盒模型

随机推荐

1. HTML，CSS - 长表的行中断需要修复
2. 样式通常以相同的组合出现：创建单个类还是
3. 如何在Java Swing中的JPanel中呈现基本的
4. 单个元素html上的多个类
5. 如何使用jQuery在我的网站演示中自动填写
6. JQuery基于元素的高度添加类
7. HTML之表格篇——表格的嵌套
8. 怎么动态设置html的canvas元素的尺寸?
9. 如何在bootstrap中添加汉堡包菜单
10. js去掉html标签和去掉字符串文本的所有的