vue3 百分数字符串转为数值|极客教程

vue3 百分数字符串转为数值

在Vue3中，我们经常需要处理百分数字符串，将其转换为数值进行计算或展示。本文将详细介绍如何在Vue3中将百分数字符串转为数值。

方法一：使用JavaScript的parseFloat函数

JavaScript提供了一个内置函数parseFloat用于将字符串转为浮点数。我们可以利用这个函数来将百分数字符串转为数值。

<template>
  <div>
    <input v-model="percentStr" type="text" placeholder="请输入百分比字符串">
    <p>百分比字符串转换后的数值为：{{percentValue}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      percentStr: '',
      percentValue: 0
    };
  },
  watch: {
    percentStr(newVal) {
      if (newVal.endsWith('%')) {
        this.percentValue = parseFloat(newVal) / 100;
      } else {
        this.percentValue = parseFloat(newVal);
      }
    }
  }
};
</script>

在上面的代码中，我们通过watch监听percentStr的变化，当percentStr发生变化时，判断字符串是否以%结尾，如果是则将字符串转为数值并除以100，否则直接转为数值赋给percentValue。

方法二：使用Vue3的计算属性

除了使用watch来监听数据变化，我们也可以使用Vue3的计算属性来实现百分数字符串转为数值的功能。

<template>
  <div>
    <input v-model="percentStr" type="text" placeholder="请输入百分比字符串">
    <p>百分比字符串转换后的数值为：{{percentValue}}</p>
  </div>
</template>

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

export default {
  setup() {
    const percentStr = ref('');
    const percentValue = computed(() => {
      if (percentStr.value.endsWith('%')) {
        return parseFloat(percentStr.value) / 100;
      } else {
        return parseFloat(percentStr.value);
      }
    });

    return { percentStr, percentValue };
  }
};
</script>

在上面的代码中，我们使用了ref来定义percentStr和computed来定义计算属性percentValue。当percentStr发生变化时，percentValue会自动更新，实现了百分数字符串转为数值的功能。

测试

我们在Vue3应用中测试上述两种方法：

<template>
  <div>
    <input v-model="percentStr" type="text" placeholder="请输入百分比字符串">
    <p>百分比字符串转换后的数值为：{{percentValue}}</p>
  </div>
</template>

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

export default {
  setup() {
    const percentStr = ref('');
    const percentValue = computed(() => {
      if (percentStr.value.endsWith('%')) {
        return parseFloat(percentStr.value) / 100;
      } else {
        return parseFloat(percentStr.value);
      }
    });

    return { percentStr, percentValue };
  }
};
</script>

我们输入"50%"，则页面会显示0.5；输入"75"，则页面会显示75。

通过上面的测试可以看出，在Vue3中将百分数字符串转为数值非常简单，可以根据具体的业务需求选择合适的方法来实现。