[Vue] eval 계산기

15921 단어 JavaScriptVue.js

개요


Vue.js의 입문으로서 뭔가를 하고 싶은 사람을 향해.
우선 일반 js로 eval 계산기, Vue를 만듭니다.js를 사용하여 추상화하다.

이루어지다


아래의 계산기는 최소 구조로 이루어진다.index.html의 이벤트를 통해 onClick 함수를 호출합니다
클릭한 버튼을 기반으로 처리합니다.

일반적인 js의 상황

calc 라벨의 나열이 불필요하다는 것을 확인할 수 있다.
어쨌든 이동하고 싶은 분들은 클론을 부탁합니다.
clone
git clone https://github.com/Naoto92X82V99/calc.git
index.html
<html>
    <head>
        <meta charset ="utf-8">
        <script src="script.js"></script>
    </head>
    <body>
        <table id="calcTable">
            <tr>
                <td colspan="3"><input type="text" id="output" value="0"></td>
                <td><button value="C" onClick="calc('C')">C</button></td>
            </tr>
            <tr>
                <td><button onClick="calc('7')">7</button></td>
                <td><button onClick="calc('8')">8</button></td>
                <td><button onClick="calc('9')">9</button></td>
                <td><button onClick="calc('/')">/</button></td>
            </tr>
            <tr>
                <td><button onClick="calc('4')">4</button></td>
                <td><button onClick="calc('5')">5</button></td>
                <td><button onClick="calc('6')">6</button></td>
                <td><button onClick="calc('*')">*</button></td>
            </tr>
            <tr>
                <td><button onClick="calc('1')">1</button></td>
                <td><button onClick="calc('2')">2</button></td>
                <td><button onClick="calc('3')">3</button></td>
                <td><button onClick="calc('-')">-</button></td>
            </tr>
            <tr>
                <td><button onClick="calc('0')">0</button></td>
                <td><button onClick="calc('.')">.</button></td>
                <td><button onClick="calc('+')">+</button></td>
                <td><button onClick="calc('=')">=</button></td>
            </tr>
        </table>
    </body>
</html>
script.js
function calc(cmd){
    const element = document.getElementById('output')
    const value = element.value

    if(cmd === '='){
        element.value  = eval(value)
    }else if(cmd === 'C'){
        element.value = '0'
    }else if(value === '0') {
        element.value = cmd
    }else{
        element.value += cmd
    }
}

Vue.js의 상황


상기 실시 방식에서 button 라벨의 나열이 불필요하기 때문에 Vue.js로 다시 써봐.
v-for를 사용하여 중복 처리를 기술할 수 있습니다.
어쨌든 이동하고 싶은 분들은 클론을 부탁합니다.
clone
git clone https://github.com/Naoto92X82V99/vue-calc.git
index.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <table id="app">
            <tr>
                <td colspan="3"><input type="text" v-model="output"></td>
                <td><button value="C" v-on:click="calc('C')">C</button></td>
            </tr>
            <tr v-for="row in items">
                <td v-for="item in row">
                    <button v-on:click="calc(item)">{{ item }}</button>
                </td>
            </tr>
        </table>

        <script src="script.js"></script>
    </body>
</html>
script.js
var app = new Vue({ 
    el: '#app',
    data: {
        output: '0',
        items: [
            ['7', '8', '9', '/'],
            ['4', '5', '6', '*'],
            ['1', '2', '3', '-'],
            ['0', '.', '+', '=']
        ]
    },
    methods: {
        calc: function (cmd) {
            if(cmd === '='){
                this.output = eval(this.output)
            }else if(cmd === 'C'){
                this.output = '0'
            }else if(this.output === '0') {
                this.output = cmd
            }else{
                this.output += cmd
            }
        }
    }
})

총결산


Vue.js를 사용하여 최소 구성으로 eval 계산기를 실현했습니다.
만약 잘못, 지적 등이 있으면 메시지를 남겨 주세요.

참고 문헌

  • 먼저-Vue.js
  • [Javascript] 짧은 사이즈로 간이 계산기를 만들어 봤어요.
    • Definitive Guide 연습
    전단 기업 면접 문제: 기업 실제 사례-33

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage