vue中 数字相加为字串转化为数值的例子

在 Vue 中，有时候我们需要将一个字符串类型的数字转换为数字类型，这时候我们可以使用 + 运算符，将字符串类型的数字转换为数字类型。下面是一个将字符串类型的数字相加运算后，将结果转换为数字类型的例子：

<template>
  <div>
    <input type="text" v-model="num1" />
    <input type="text" v-model="num2" />
    <button @click="sum">计算</button>
    <div>{{result}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: "",
      num2: "",
      result: 0 // 存储计算结果
    };
  },
  methods: {
    sum() {
      this.result = +this.num1 + +this.num2; // 将字符串类型的数字转换为数字类型
    }
  }
};
</script>

在这个例子中，我们定义了两个文本输入框和一个按钮，用于计算输入框中的值的和。当我们点击按钮时，sum 方法会将 num1 和 num2 中的值相加，并将结果存储在 result 中。在计算过程中，我们用 + 运算符将字符串类型的数字转换为数字类型。最后，我们使用 {{result}} 将计算结果显示在页面中。

除了用 + 运算符将字符串类型的数字转换为数字类型之外，还有其他方法可以实现相同的效果。比如，使用 JavaScript 内置的 Number 方法，也可以将字符串类型的数字转换为数字类型。下面是一个使用 Number 方法将字符串类型的数字转换为数字类型的例子：

<template>
  <div>
    <input type="text" v-model="num1" />
    <input type="text" v-model="num2" />
    <button @click="sum">计算</button>
    <div>{{result}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: "",
      num2: "",
      result: 0 // 存储计算结果
    };
  },
  methods: {
    sum() {
      this.result = Number(this.num1) + Number(this.num2); // 将字符串类型的数字转换为数字类型
    }
  }
};
</script>

在这个例子中，我们使用 Number 方法将 num1 和 num2 中的值转换为数字类型，并将他们相加。最后，我们将计算结果保存在 result 中，并在界面中显示出来。

综上所述，这两个例子都演示了在 Vue 中将字符串类型的数字转换为数字类型的方法，其中第一种方法使用 + 运算符，第二种方法使用 Number 方法。不同的开发者有不同的偏好，可以根据自己的习惯选择使用一种方法或多种方法来实现相同的功能。