vue 字符串转number|极客教程

vue 字符串转number

在Vue.js开发中，经常会遇到将字符串转为数字的需求。比如从接口中获取的数据是字符串类型，但我们需要将其转换为数字进行计算或展示。这篇文章将详细介绍如何在Vue.js中将字符串转换为数字。

使用JavaScript内置方法parseInt和parseFloat

在JavaScript中，我们可以使用内置的parseInt和parseFloat方法将字符串转换为数字。parseInt方法会将字符串转为整数，而parseFloat方法会将字符串转为浮点数。

下面是一个简单的示例，演示如何在Vue.js中使用这两个方法将字符串转为数字：

<template>
  <div>
    <p>字符串转为整数：{{ intValue }}</p>
    <p>字符串转为浮点数：{{ floatValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stringValue: "123",
      intValue: parseInt(this.stringValue),
      floatValue: parseFloat("3.14")
    };
  }
};
</script>

在上面的示例中，我们将stringValue字符串转换为整数并赋值给intValue，将字符串"3.14"转换为浮点数并赋值给floatValue。在模板中展示这两个数字即可。

使用Vue过滤器

除了直接在数据中使用JavaScript方法进行转换，我们还可以使用Vue的过滤器来将字符串转为数字。Vue的过滤器可以方便地用于模板中对数据进行处理和格式化。

下面是一个使用过滤器将字符串转为数字的示例：

<template>
  <div>
    <p>字符串转为整数：{{ stringValue | toInt }}</p>
    <p>字符串转为浮点数：{{ floatValue | toFloat }}</p>
  </div>
</template>

<script>
export default {
  filters: {
    toInt: function(value) {
      return parseInt(value);
    },
    toFloat: function(value) {
      return parseFloat(value);
    }
  },
  data() {
    return {
      stringValue: "456",
      floatValue: "7.89"
    };
  }
};
</script>

在上面的示例中，我们定义了两个过滤器toInt和toFloat，分别使用parseInt和parseFloat方法将字符串转为整数和浮点数。在模板中通过管道符|使用这两个过滤器即可。

使用加号运算符+

除了parseInt和parseFloat方法以外，还可以使用加号运算符+来将字符串转换为数字。这种方法相对更简洁。

下面是一个使用加号运算符将字符串转为数字的示例：

<template>
  <div>
    <p>字符串转为整数：{{ intValue }}</p>
    <p>字符串转为浮点数：{{ floatValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stringValue: "789",
      floatValue: +"9.87",
      intValue: +this.stringValue
    };
  }
};
</script>

在上面的示例中，我们直接在模板中使用加号运算符将字符串转为数字，分别将stringValue和"9.87"转换为整数和浮点数。加号左侧是字符串，则会将其转为数字。