vue 做的计算器

最新推荐文章于 2026-05-09 06:21:29 发布

原创最新推荐文章于 2026-05-09 06:21:29 发布 · 2.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue做的计算器 #vuex做的计算器 #vue的小例子 #vuex的小例子

vue基本语法例子专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用Vue.js和Vuex.js构建一个简单的计算器应用。首先需要下载vue.js和vuex.js库，接着理解Vuex的store、mutations和getters等基本概念。最后，结合组件完成计算器的逻辑实现。

1.首先你的下载vue.js和vuex.js（ vuex.js下载地址：https://github.com/jilifeng/vuex.text）

2.然后你的对vuex 有一定的的了解（store ,mutations ,getters）我也只知道这些。哈哈

3.还有组件

写这个的逻辑都在下面，一步步都标记清楚了（就是怕忘哈哈，因为我也是个渣渣吐舌头）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
<script src="../js/vuex.js"></script>
<style>
  #app{
    width: 305px;
    background:red;
  }

  .result{
    height: 100px;
    background: #ddd;
    line-height: 178px;
    
  }
  .enter{
    height: 30px;
    line-height: 30px;
    background: #ddd;
   
  }
  .list{
    height: 305px;
    border-right: 1px solid #ddd;
    background: #fff;
  }
  .list div{
    float: left;
    width: 75px;
    height: 75px;
    border-left: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    text-align:center;
    line-height: 75px;
    font-size: 16px;
    color: #333333;
    cursor: pointer;
  }
</style>
</head>
<body>
 <div id="app">
     <div class="result">
      <!--绑定计算属性result-->
      {{ result }}
   </div>
   <div class="enter">
      <!--绑定计算属性enter-->
      {{ enter === ""?0:enter}}
   </div>
    <div class="keys">
        <div class="list">
          <keyboard
        v-for="item in keys"
        :value="item">
    </keyboard>
            <!--键盘区域-->
        </div>
    </div>
 </div>

<script>
  //  1. 安装了Vue和Vuex
  // 2. 创建了仓库store
  // 3. 定义了键盘组件 <keyboard/> 
  // 4. 页面的布局
  // 5.创建了Vue实例
     // 6.计算属性
     // 7.methods
     // 8.监听事件
     // 9.mutations

 Vue.component('keyboard',{
    props:['value'],
    //点击事件的监听处理getKeyboardValue
    template:`<div 
             @click="getKeyboardValue"
             :data-value="value">
             {{value}}
           </div>`,
    methods:{
     //点击事件处理函数
    getKeyboardValue(event){
       //获取当前的按键的值
     let value=event.target.dataset.value;
       //通过commit提交mutation
       this.$store.commit('calculate',value)
     }
    }
 });

//创建仓库store
 const store = new Vuex.Store({
    state:{
        result:"",  //结果
        enter:""    //输入
    },
    //定义名为calculate的mutation
    mutations:{
        calculate(state,value){    
          if(value === '='){

            //按键的值为=，进行结果计算
            state.result = eval(state.enter);// 计算方法+ -
            state.enter += value;
            //state.enter = state.enter +value 

          }else if(value === 'clear'){

            //按键的值为clear，清空数据
            state.result = state.enter = "";

          }else{

            //输入结果enter进行拼接
            state.enter += value;
          }
        }
    }
 });
//实例
const app = new Vue({
  //挂载元素
  el:'#app',

  //ES6语法，相当于"store:srore"

  store,

  data:{

    //16个按键的值

        keys:[
          'clear', '+', '-', '*',
            '7', '8', '9', '/',
            '4', '5', '6', '0',
            '1', '2', '3', '=',
        ]

      },

      //计算属性
     computed:{
      result(){
        //通过this.$store获取仓库的数据result
        return this.$store.state.result;
      },
      enter(){
       //通过this.$store获取仓库的数据result
        return this.$store.state.enter;
      }
    }
 });



</script>
</body>
</html>