vue实现两数对比

实现两数对比的Vue方法

在Vue中实现两数对比可以通过计算属性、方法或直接模板内比较来实现。以下是几种常见的实现方式：

计算属性方式

<template>
  <div>
    <input v-model.number="num1" type="number">
    <input v-model.number="num2" type="number">
    <p>{{ comparisonResult }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0
    }
  },
  computed: {
    comparisonResult() {
      if (this.num1 > this.num2) {
        return `${this.num1} 大于 ${this.num2}`
      } else if (this.num1 < this.num2) {
        return `${this.num1} 小于 ${this.num2}`
      } else {
        return `${this.num1} 等于 ${this.num2}`
      }
    }
  }
}
</script>

方法调用方式

<template>
  <div>
    <input v-model.number="num1" type="number">
    <input v-model.number="num2" type="number">
    <button @click="compareNumbers">比较</button>
    <p>{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
      result: ''
    }
  },
  methods: {
    compareNumbers() {
      if (this.num1 > this.num2) {
        this.result = `${this.num1} 大于 ${this.num2}`
      } else if (this.num1 < this.num2) {
        this.result = `${this.num1} 小于 ${this.num2}`
      } else {
        this.result = `${this.num1} 等于 ${this.num2}`
      }
    }
  }
}
</script>

模板内直接比较

<template>
  <div>
    <input v-model.number="num1" type="number">
    <input v-model.number="num2" type="number">
    <p v-if="num1 > num2">{{ num1 }} 大于 {{ num2 }}</p>
    <p v-else-if="num1 < num2">{{ num1 }} 小于 {{ num2 }}</p>
    <p v-else>{{ num1 }} 等于 {{ num2 }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0
    }
  }
}
</script>

使用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: ''
    }
  },
  watch: {
    num1: {
      handler(newVal) {
        this.compareNumbers(newVal, this.num2)
      },
      immediate: true
    },
    num2: {
      handler(newVal) {
        this.compareNumbers(this.num1, newVal)
      }
    }
  },
  methods: {
    compareNumbers(a, b) {
      if (a > b) {
        this.result = `${a} 大于 ${b}`
      } else if (a < b) {
        this.result = `${a} 小于 ${b}`
      } else {
        this.result = `${a} 等于 ${b}`
      }
    }
  }
}
</script>

封装为组件

可以创建一个可复用的数字比较组件：

<template>
  <div>
    <number-comparator v-model:first="firstNum" v-model:second="secondNum" />
  </div>
</template>

<script>
import NumberComparator from './NumberComparator.vue'

export default {
  components: {
    NumberComparator
  },
  data() {
    return {
      firstNum: 10,
      secondNum: 20
    }
  }
}
</script>

NumberComparator.vue组件：

<template>
  <div>
    <input v-model.number="first" type="number">
    <input v-model.number="second" type="number">
    <p>{{ comparisonText }}</p>
  </div>
</template>

<script>
export default {
  props: {
    first: {
      type: Number,
      required: true
    },
    second: {
      type: Number,
      required: true
    }
  },
  emits: ['update:first', 'update:second'],
  computed: {
    comparisonText() {
      if (this.first > this.second) {
        return `${this.first} > ${this.second}`
      } else if (this.first < this.second) {
        return `${this.first} < ${this.second}`
      }
      return `${this.first} = ${this.second}`
    }
  },
  watch: {
    first(newVal) {
      this.$emit('update:first', newVal)
    },
    second(newVal) {
      this.$emit('update:second', newVal)
    }
  }
}
</script>

以上方法都可以实现两数对比功能，选择哪种方式取决于具体需求和场景。计算属性适合需要响应式更新的场景，方法调用适合需要用户主动触发的场景，而watch适合需要监听数据变化的复杂逻辑。