vue实现数字平方

在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="number" type="number">
    <button @click="calculateSquare">计算平方</button>
    <p>平方结果: {{ result }}</p>
  </div>
</template>

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

使用Watcher监听数字变化

当需要在数字变化时执行特定操作，可以使用watcher。这种方式适合需要处理异步或开销较大的操作：

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

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

使用Vue 3的组合式API

在Vue 3中，可以使用组合式API更灵活地组织代码：

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

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

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

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

使用过滤器格式化平方结果

虽然Vue 3已弃用过滤器，但在Vue 2中仍可使用过滤器格式化显示结果：

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

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

每种实现方式适用于不同场景，计算属性适合自动更新的响应式计算，方法适合事件触发的计算，watcher适合需要执行副作用的场景，组合式API提供了更灵活的代码组织方式。