Vue之vuex实现简易计算器

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuex——示例计算器</title>
    <script src="https://unpkg.com/vue@2.3.3/dist/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/vue-router@2.5.3/dist/vue-router.js" type="text/javascript"></script>
    <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js" type="text/javascript"></script>
</head>
<body>

<style>
    .result{
        background: #ccc;
        height:200px;
        width: 80%;
        text-align: right;
        font-size: 48px;
        position: relative;
    }
    .enter{
        background: #ccc;
        height: 50px;
        width: 78%;
        text-align: right;
        font-size:32px;
        border-bottom: 1px solid white;
        padding-right: 2%;
    }
    .keys{
        background: #eee;
        width: 80%;
    }
    .item{
        width: 25%;
        height: 80px;
        display: inline-block;
        line-height: 80px;
        border-bottom: 1px solid white;
        text-align: center;
        cursor: pointer;
    }
    .item:hover{
        background: #000;
        color: #ccc;
    }
    .item:first-child{
        color: red;
    }
    .item:first-child:hover{
        background: red;
        color: #ccc;
    }
    .item:last-child{
        background: red;
        color: white;
    }
    .item:last-child:hover{
        background: green;
        color: red;
    }
</style>

<div id="app">
    <div class="result">
        <!--绑定计算属性result-->
        <div style="position: absolute;bottom: 0;right: 2%;">
            {{ result }}
        </div>
    </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>
    // 创建仓库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 === "clear"){
                    //按键的值为clear，清空数据
                    state.result = state.enter = "";
                } else {
                    //输入结果enter进行拼接
                    state.enter += value;
                }
            }
        }
    });
    //自定义组件
    Vue.component('keyboard',{
        //接受的参数value，代表键盘的值
        props: ['value'],
        //模板
        template: `<div class="item"
                        @click="getKeyboardValue"
                        :data-value="value">
                        {{value}}
                  </div>`,
        methods: {
            // 点击事件处理函数
            getKeyboardValue(event){
                //获取当前的按键的值
                let value = event.target.dataset.value;
                //通过commit提交mutation
                this.$store.commit('calculate', value);
            }
        }
    });

    //创建Vue实例
    const app = new Vue({
        //挂载元素
        el: "#app",
        //ES6语法，相当于"store":store
        store,
        data: {
            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>

 

代码抄自：https://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654627&idx=1&sn=85bb9d0dfe34ab464f984f5f3042be2e&chksm=872c42dcb05bcbca37d495b24dfccb4a0179101e557be4c0119ab5a218c406a736e595ba5131&scene=21#wechat_redirect

微信号：webjiaocheng/Web前端教程

 

谢谢

posted @ 2018-03-02 14:11  宝山方圆  阅读(528)  评论(0)  编辑  收藏  举报