vue 以數值計算

by ysuper

HTML

<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div id="app">
  <input v-model.number="num1"> + 
  <input v-model.number="num2"> = {{ sum }}
</div>

CSS

body {
  padding: 1rem;
}

input {
  width: 100px;
}

JavaScript

const vm = Vue.createApp({
  data () {
    return {
      num1: 0,
      num2: 0,
    }
  },
  computed: {
    sum() {
      return this.num1 + this.num2;
    }
  }
}).mount('#app');