Vue 字符串转数字

在 Vue 中，字符串转数字是一个常见的操作。在开发过程中，我们经常需要将用户输入的字符串转换为数字类型，以便进行计算、比较等操作。本文将详细介绍在 Vue 中实现字符串转数字的几种方法。

1. 使用 JavaScript 的 parseInt() 方法

JavaScript 中的 parseInt() 方法可以将字符串转换为整数。在 Vue 中，我们可以在模板中直接使用这个方法。

<template>
  <div>
    <input v-model="str" type="text">
    <button @click="convertToInt">转换为整数</button>
    <p>转换结果：{{ num }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: '',
      num: ''
    }
  },
  methods: {
    convertToInt() {
      this.num = parseInt(this.str)
    }
  }
}
</script>

上面的代码中，我们使用 v-model 指令将输入框的值与 str 变量绑定，当用户输入改变时，str 的值也会相应改变。点击 “转换为整数” 按钮时，调用 convertToInt 方法，将 str 的值转换为整数并赋给 num 变量。最终结果在页面中显示出来。

2. 使用 JavaScript 的 parseFloat() 方法

类似于 parseInt() 方法，JavaScript 中还提供了 parseFloat() 方法，可以将字符串转换为浮点数。在 Vue 中，我们也可以利用这个方法实现字符串转数字的功能。

<template>
  <div>
    <input v-model="str" type="text">
    <button @click="convertToFloat">转换为浮点数</button>
    <p>转换结果：{{ num }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: '',
      num: ''
    }
  },
  methods: {
    convertToFloat() {
      this.num = parseFloat(this.str)
    }
  }
}
</script>

上述代码中的逻辑与第一种方法类似，只是改用 parseFloat() 方法进行转换。

3. 使用 Vue 自定义过滤器

Vue 提供了自定义过滤器的功能，我们可以利用它将字符串转换为数字。这种方式使得我们在模板中可以直接使用过滤器来实现转换，代码更加简洁。

<template>
  <div>
    <input v-model="str" type="text">
    <p>转换结果：{{ str | toNumber }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: ''
    }
  },
  filters: {
    toNumber(value) {
      return Number(value)
    }
  }
}
</script>

上面的代码中，我们定义了一个名为 toNumber 的过滤器，它接受一个参数 value，将其转换为数字类型并返回。在模板中，我们使用 {{ str | toNumber }} 的语法形式来应用过滤器，将 str 的值传入过滤器中进行转换。

4. 使用 JavaScript 的 Number() 函数

除了 parseInt() 和 parseFloat() 方法外，JavaScript 还提供了 Number() 函数用于将字符串转换为数字。在 Vue 中，我们也可以通过这个函数实现字符串转数字的功能。

<template>
  <div>
    <input v-model="str" type="text">
    <button @click="convertToNumber">转换</button>
    <p>转换结果：{{ num }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: '',
      num: ''
    }
  },
  methods: {
    convertToNumber() {
      this.num = Number(this.str)
    }
  }
}
</script>

上述代码中，我们定义了一个名为 convertToNumber 的方法，在点击按钮时调用该方法，将 str 的值转换为数字类型并赋给 num。最终结果在页面中显示出来。

5. 使用加号（+）运算符

JavaScript 中的加号运算符可以将字符串转换为数字。在 Vue 中，我们可以利用这个特性来实现字符串转数字的功能。

<template>
  <div>
    <input v-model="str" type="text">
    <button @click="convertToNumber">转换</button>
    <p>转换结果：{{ num }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: '',
      num: ''
    }
  },
  methods: {
    convertToNumber() {
      this.num = + this.str
    }
  }
}
</script>

上述代码中，我们将 str 的值前面加上加号（+），即 + this.str，这样就可以将其隐式转换为数字类型，并赋给 num 变量。