vue.js的简单自动求和计算实例

下面为大家讲解一下“Vue.js的简单自动求和计算实例”的完整攻略。

思路概述

首先，我们需要使用 Vue.js 组件化的思想，将输入框和显示框拆分成独立的组件，这样方便我们进行状态管理和更新视图。

其次，我们需要监听输入框的值变化，并对输入的数据进行求和计算，最后将结果显示在显示框中。

示例说明一

下面我们通过一个实例进一步说明上述思路：

在 HTML 中引入 Vue.js 的库和 main.js 文件：

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./main.js"></script>
</body>

在 main.js 中定义两个组件：CountInput 和 CountResult。

Vue.component('count-input', {
  template: `
    <div>
      <label>数量：</label>
      <input type="number" v-model="count" @input="$emit('update', count)">
    </div>
  `,
  data() {
    return {
      count: 0
    }
  }
})

Vue.component('count-result', {
  template: `
    <div>
      <p>合计数量：{{ total }}</p>
    </div>
  `,
  props: {
    counts: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    total() {
      return this.counts.reduce((acc, cur) => acc + cur, 0)
    }
  }
})

在 main.js 中创建一个 Vue 实例，将 CountInput 和 CountResult 组件注册到该实例中。

const vm = new Vue({
  el: '#app',
  data: {
    counts: [0, 0, 0, 0, 0]
  }
})

在 HTML 中使用 CountInput 和 CountResult 组件，并将 counts 数组传递给 CountResult 组件。

<div id="app">
  <count-input v-for="(count, index) in counts" :key="index" @update="handleChangeCount(index, $event)"></count-input>
  <count-result :counts="counts"></count-result>
</div>

在 main.js 中定义 handleChangeCount 方法，当 CountInput 组件的值发生变化时，将该值同步到 counts 数组中。

methods: {
  handleChangeCount(index, value) {
    this.counts.splice(index, 1, parseInt(value))
  }
}

刷新页面，输入框的数值发生变化时，CountResult 组件会自动更新合计数量的值。

示例说明二

接下来我们看看第二个示例，这里我们使用 vue-cli 创建一个 Vue.js 项目。

在命令行中输入以下命令，创建一个 Vue.js 项目：

vue create sum-vue-app

cd sum-vue-app
npm run serve

在 src/components 目录下创建 CountInput.vue 和 CountResult.vue 两个组件：

CountInput.vue：

<template>
  <div>
    <label>数量：</label>
    <input type="number" v-model="count" @input="$emit('update', count)">
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

CountResult.vue：

<template>
  <div>
    <p>合计数量：{{ total }}</p>
  </div>
</template>

<script>
export default {
  props: {
    counts: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    total() {
      return this.counts.reduce((acc, cur) => acc + cur, 0)
    }
  }
}
</script>

在 App.vue 中使用 CountInput 和 CountResult 组件：

<template>
  <div>
    <count-input v-for="(count, index) in counts" :key="index" @update="handleChangeCount(index, $event)"></count-input>
    <count-result :counts="counts"></count-result>
  </div>
</template>

<script>
import CountInput from '@/components/CountInput.vue'
import CountResult from '@/components/CountResult.vue'

export default {
  components: {
    CountInput,
    CountResult
  },
  data() {
    return {
      counts: [0, 0, 0, 0, 0]
    }
  },
  methods: {
    handleChangeCount(index, value) {
      this.counts.splice(index, 1, parseInt(value))
    }
  }
}
</script>