Vue 字符串转换数字

1. 引言

在 Vue 中，我们经常需要将字符串转换为数字，以便进行数值计算、表单校验等操作。本文将详细介绍 Vue 中字符串转换为数字的几种常见方法，并给出示例代码及运行结果。

2. 使用 JavaScript 的内置方法

JavaScript 提供了几种内置的方法可以将字符串转换为数字。

2.1. 使用 parseInt 方法

parseInt 方法可以将字符串转换为整数。

示例代码：

let str = '123';
let num = parseInt(str);
console.log(num); // 输出 123

2.2. 使用 parseFloat 方法

parseFloat 方法可以将字符串转换为浮点数。

示例代码：

let str = '3.14';
let num = parseFloat(str);
console.log(num); // 输出 3.14

2.3. 使用 Number 方法

Number 方法可以将字符串转换为数字。

示例代码：

let str = '456';
let num = Number(str);
console.log(num); // 输出 456

3. 使用 Vue 的过滤器

Vue 提供了过滤器的功能，可以在模板中对数据进行处理和格式化。我们可以通过自定义过滤器将字符串转换为数字。

示例代码：

Vue.filter('toNumber', function (value) {
  if (typeof value === 'string') {
    return Number(value);
  }
  return value;
});

// 在模板中使用过滤器
<p>{{ price | toNumber }}</p>

4. 使用计算属性

在 Vue 中，我们可以使用计算属性来将字符串转换为数字。

示例代码：

data() {
  return {
    priceStr: '789'
  }
},
computed: {
  priceNum() {
    return Number(this.priceStr);
  }
}

5. 在 Watch 中进行转换

我们还可以在 Vue 的 Watch 选项中对数据进行监听，并在监听函数中进行转换。

示例代码：

data() {
  return {
    priceStr: '987'
  }
},
watch: {
  priceStr: {
    handler(newValue) {
      this.priceNum = Number(newValue);
    },
    immediate: true
  }
}