vue实现计算器封装

最新推荐文章于 2023-07-05 15:59:27 发布

@Herry

最新推荐文章于 2023-07-05 15:59:27 发布

阅读量673

点赞数

分类专栏： # Vue

本文链接：https://blog.csdn.net/aimin_com/article/details/103646377

版权

前言：根据计算器可增添加减乘除的封装可扩展，大家请参照效果如下：

在这里插入图片描述

文件目录

我们导入了四个js包，在下面有源代码，当前计算器页只有一个valculator.vue文件。

在这里插入图片描述

valculator.vue：<html代码>

template>
  <div class="about">
    <h1>这是个计算器你信吗</h1>
    <van-cell-group type="text">
      <van-field
        οninput="value=value.replace(/[^\d+(+)+(-)+(*)]/g, '').replace(/^0{1,}/g,'')"
        v-model="inputValue"
        placeholder="请输入数字"
      />
    </van-cell-group>
    <div style="margin-top:20%">
      <van-grid clickable :column-num="4" :gutter="10">
        <van-grid-item @click="onclick(i)" v-for="(num, i) in dataNum" :key="i" :text="dataNum[i]" />
      </van-grid>
    </div>
  </div>
</template>

valculator.vue：《js方法》

<script>
// eslint-disable-next-line no-unused-vars
import {
    Field } from 'vant'
export default {
   
  data () {
   
    return {
   
      // 数字加减乘除数组
      dataNum: [
        '+',
        '-',
        '*',
        '/',
        '1',
        '2',
        '3',
        '< X',
        '4',
        '5',
        '6',
        '=',
        '7',
        '8',
        '9',
        '0'
      ],
      inputValue: '', // input当前显示值
      inputStorage: '', // input输入值存储
      calculator: '', // 解析拿到的值

      temporaryVariables1: '', // 存储临时计算拼接值1
      temporaryVariables2: '', // 存储临时计算拼接值2
      temporaryOperator: '' // 存储临时运算符
    }
  },
  methods: {
   
    // 点击事件
    onclick (index) {
   
      this.parsing(index) // 解析当前的值
      this.judge() // 判断进行运算
    },

    // 解析当前拿到的值
    parsing (index) {
   
      switch (index) {
   
        case 4:
          this.calculator = '1'
          break
        case 5:
          this.calculator = '2'
          break
        case 6:
          this.calculator = '3'
          break