Vue

by realdev

HTML

<div id="app">
  <h2>원리를 이해할 수 있는 초등 덧셈 계산기:</h2>
  <table>
    <tr>
      <td>
        <input type="number" v-model.number="firstNum">                  
     </td>
     <td>
         &nbsp; +  &nbsp;
      </td>
      <td>
        <input type="number" v-model.number="secondNum">        
      </td>
      <td>
         &nbsp; =  &nbsp;
      </td>
      <td>
        <input type="number" v-model.number="resultNum">        
      </td>        
      </tr>
      <tr>
      <td>        111
          <ol>
            <my-counter v-for="n in firstNum" :key="n" :num="n"/>                 
          </ol>        
      </td>
      <td>
         
      </td>
      <!--<td>        
        <ol>
          <my-counter v-for="n in secondNum" :key="n" :n="n"/>                 
        </ol>
      </td>
      <td>
         
      </td>
      <td>
        <ol>
          <my-counter v-for="n in resultNum" :key="n" :n="n"/>                 
        </ol>
      </td>-->
    </tr>  
   </table>  
   
  <script type="text/x-template" id="item-template">         
      	<li>
        <label>            
          <span>
            {{ num }}
          </span>
        </label>
      </li>          
  </script>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.top{
  vertical-align: top;
}

Vue

Vue.component('my-counter', {
  // 옵션
  template: '#item-template',
  props: {
    num: Number
  }
})

new Vue({
  el: "#app",
  data: {
    firstNum: 0,    
    secondNum: 0,
    resultNum: 0
  },
  methods: {
  	addNum() {
    	
    }
  }
})