Vue3数组的值由String转Number|极客教程

Vue3数组的值由String转Number

在Vue3中，经常会遇到将数组中的字符串转换为数字的情况。比如我们从后端接口获取到的数据是字符串类型，但我们需要将其转换为数字类型进行计算或展示。本文将详细介绍如何在Vue3中实现数组的值由字符串转数字的操作。

使用parseInt方法

在JavaScript中，我们可以使用parseInt方法将字符串转换为数字。在Vue3的项目中，我们可以通过遍历数组，将数组中的每个字符串转换为数字。

下面是一个示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in numberArray" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const stringArray = ref(['1', '2', '3', '4', '5']);
    const numberArray = ref([]);

    // 将字符串数组转换为数字数组
    stringArray.value.forEach(item => {
      numberArray.value.push(parseInt(item));
    });

    return {
      numberArray
    };
  }
};
</script>

上面的示例代码演示了如何将字符串数组转换为数字数组。我们首先定义了一个名为stringArray的响应式数组，其中存储了一组字符串。然后，我们定义了一个名为numberArray的响应式数组，用于存储转换后的数字数组。通过forEach方法遍历字符串数组，并使用parseInt方法将每个字符串转换为数字，然后将其添加到numberArray数组中。

运行上面的示例代码，我们可以得到如下结果：

1
2
3
4
5

使用map方法

除了使用forEach方法外，我们还可以使用JavaScript的map方法来实现将字符串数组转换为数字数组。map方法会返回一个新的数组，包含经过处理的每个元素。

下面是一个使用map方法的示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in numberArray" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const stringArray = ref(['6', '7', '8', '9', '10']);
    const numberArray = ref([]);

    // 将字符串数组转换为数字数组
    numberArray.value = stringArray.value.map(item => parseInt(item));

    return {
      numberArray
    };
  }
};
</script>

上面的示例代码中，我们定义了名为stringArray的字符串数组和名为numberArray的数字数组。使用map方法，我们可以直接将stringArray中的每个字符串转换为数字，并将结果存储到numberArray数组中。

运行上面的示例代码，我们可以得到如下结果：

6
7
8
9
10