使用Vue写一个简易计算器

注：输入框中的值都是字符串形式，需要使用 parseInt() 把字符串转换成数值型，也可以使用 vue 提供的 number 修饰符。

Vue3.0 实现简易计算器

<template>
  <section>
    <input type="text" v-model="num1" />
    <span>+</span>
    <input type="text" v-model="num2" />
    <span>=</span>
    <span>{{total}}</span>
  </section>
</template>

<script>
import { reactive, computed, toRefs } from 'vue'

function useAdd () {
  const state = reactive({
    num1: 0,
    num2: 0,
    total: computed(() => {
      return parseInt(state.num1) + parseInt(state.num2)
    })
  })
  return toRefs(state)
}

export default {
  name: 'Counter',
  setup () {
    const { num1, num2, result } = useAdd()
    return {
      num1,
      num2,
      total
    }
  }
}
</script>

Vue2.0 实现简易计算器

<template>
  <section>
    <input type="text" v-model.number="num1" />
    <span>+</span>
    <input type="text" v-model.number="num2" />
    <span>=</span>
    <span>{{total}}</span>
  </section>
</template>

<script>
export default {
  name: 'Counter',
  data () {
    return {
      num1: 0,
      num2: 0
    }
  },
  computed: {
    total () {
      return this.num1 + this.num2
    }
  }
}
</script>