vue实现相乘功能

Vue 实现相乘功能

在 Vue 中实现相乘功能可以通过数据绑定、计算属性或方法来完成。以下是几种常见实现方式：

使用计算属性实现相乘

计算属性适合基于响应式数据进行计算，结果会被缓存：

<template>
  <div>
    <input v-model.number="num1" type="number">
    <input v-model.number="num2" type="number">
    <p>结果: {{ product }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0
    }
  },
  computed: {
    product() {
      return this.num1 * this.num2
    }
  }
}
</script>

使用方法实现相乘

使用方法可以在需要时触发计算：

<template>
  <div>
    <input v-model.number="num1" type="number">
    <input v-model.number="num2" type="number">
    <button @click="calculate">计算</button>
    <p>结果: {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
      result: 0
    }
  },
  methods: {
    calculate() {
      this.result = this.num1 * this.num2
    }
  }
}
</script>

使用 watch 监听变化

watch 可以监听数据变化并执行相乘操作：

<template>
  <div>
    <input v-model.number="num1" type="number">
    <input v-model.number="num2" type="number">
    <p>结果: {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
      result: 0
    }
  },
  watch: {
    num1(newVal) {
      this.result = newVal * this.num2
    },
    num2(newVal) {
      this.result = this.num1 * newVal
    }
  }
}
</script>

表单验证和增强

可以添加表单验证确保输入是数字：

<template>
  <div>
    <input v-model.number="num1" type="number" @input="validateInput('num1')">
    <input v-model.number="num2" type="number" @input="validateInput('num2')">
    <p v-if="error" style="color: red">{{ error }}</p>
    <p>结果: {{ product }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
      error: ''
    }
  },
  computed: {
    product() {
      return this.num1 * this.num2
    }
  },
  methods: {
    validateInput(field) {
      if (isNaN(this[field])) {
        this.error = '请输入有效数字'
      } else {
        this.error = ''
      }
    }
  }
}
</script>

这些方法可以根据具体需求选择使用。计算属性适合自动更新的场景，方法适合需要手动触发的场景，watch 适合需要复杂监听逻辑的场景。