【vue.js】vuex实现简单的计算器（加减乘除）demo

效果图：代码：<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title>&lt

不想加班的虎砸

6413人浏览 · 2018-08-05 19:34:58

不想加班的虎砸 · 2018-08-05 19:34:58 发布

效果图：

代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="vuex.js"></script>
    <style>
        #app{
            position:relative;
            margin:0 auto;
            width:300px;
            height:355px;
        }
        .show{
            width:298px;
            height:100px;
            border:1px solid #9A9A9A;
            background:#EEEEF2;
        }
        .result{
            height:50px;
            text-align:right;
            line-height:50px;
        }
        .enter{
            height:50px;
            text-align:right;
            line-height:50px;
        }
        .keyboard{
            width:300px;
            height:300px;
        }
        [data-value]{
            diaplay:inline-block;
            width:24.3%;
            height:75px;
            text-align:center;
            line-height:75px;
            float:left;
            border:1px solid #9A9A9A;
            cursor:pointer;
        }
        [data-value='=']{
            background:#EE6633;
            color:#fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="show">
            <div class="result">{{result}}</div>
            <div class="enter">{{enter==='' ? 0 : enter}}</div>
        </div>
        <div class="keyboard">
            <keyboard v-for="item in keys" :value="item"></keyboard>
        </div>
    </div>
</body>
<script>
    /*创建仓库store*/
    const store=new Vuex.Store({
        state:{
            result:'',
            enter:'',
        },
        mutations:{
            calculate(state,value){
                if(value=="="){
                    state.result=eval(state.enter);
                    state.enter+=value;
                } else if(value=="C"){
                    state.result=state.enter="";
                } else {
                    state.enter+=value;
                }
            }
        }
    });

    /*自定义组件*/
    Vue.component('keyboard',{
        /*接受参数value，代表键盘值*/
        props:['value'],
        /*模板，div标签里添加了动态属性data-value*/
        template:
            `<div
                 @click="getValue"
                 :data-value="value">
                 {{value}}
             </div>`,
        methods:{
            //点击事件处理函数
            getValue(event){
                //获取当前的按键的值
                let val=event.target.dataset.value;
                //通过commit提交mutation
                this.$store.commit('calculate',val);
            }
        }
    });

    const vm=new Vue({
        el:"#app",

        //es6语法，相当于store:store,用于引入store，然后就可以通过this.$store访问到
        store,
        data:{
            keys:[
                'C','+','-','*',
                '7','8','9','/',
                '4','5','6','0',
                '1','2','3','=',
            ]
        },
        //增加计算属性
        computed:{
            result(){
                //通过this.$store获取仓库的数据result
                return this.$store.state.result;
            },
            enter(){
                //通过this.$store获取仓库的数据enter
                return this.$store.state.enter;
            }
        }
    });
</script>
</html>

参考链接：https://mp.weixin.qq.com/s/xmNKIODUR3T9sbuoj8c6qw

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^