vue实现数字平方

在Vue中实现数字平方功能

计算属性方式

通过计算属性自动计算平方值，适用于依赖响应式数据的场景：

<template>
  <div>
    <input v-model.number="number" type="number">
    <p>平方结果：{{ squared }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    }
  },
  computed: {
    squared() {
      return this.number * this.number
    }
  }
}
</script>

方法调用方式

使用方法实现更灵活的计算，适合需要参数传递的场景：

<template>
  <div>
    <input v-model.number="inputNumber" type="number">
    <button @click="calculateSquare">计算平方</button>
    <p>平方结果：{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputNumber: 0,
      result: 0
    }
  },
  methods: {
    calculateSquare() {
      this.result = Math.pow(this.inputNumber, 2)
    }
  }
}
</script>

过滤器方式

适用于简单的模板内数值转换：

<template>
  <div>
    <input v-model.number="num" type="number">
    <p>平方结果：{{ num | square }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0
    }
  },
  filters: {
    square(value) {
      return value * value
    }
  }
}
</script>

使用watch监听

当需要处理复杂逻辑或异步操作时：

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

使用Vue 3组合式API

Vue 3的setup语法实现：

<template>
  <div>
    <input v-model.number="num" type="number">
    <p>平方结果：{{ squared }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const num = ref(0)
    const squared = computed(() => num.value * num.value)

    return { num, squared }
  }
}
</script>

每种实现方式适用于不同场景，计算属性适合自动更新的简单计算，方法调用适合需要用户交互触发的计算，过滤器适合简单的模板转换，watch适合需要响应式处理的复杂逻辑，组合式API提供更灵活的代码组织方式。