Vue的五种方法实现加减乘除运算

一花一world

已于 2023-08-22 18:23:28 修改

阅读量5.5k

点赞数 2

分类专栏：前端文章标签： vue.js 前端 javascript

于 2023-08-22 18:19:51 首次发布

本文链接：https://blog.csdn.net/ACCPluzhiqi/article/details/132433534

版权

前端专栏收录该内容

178 篇文章 31 订阅

订阅专栏

五种方法的详细说明：

计算属性（Computed Properties）：
- 计算属性是Vue.js提供的一种便捷的属性，它根据依赖的数据动态计算出一个新的值。
- 计算属性的值会被缓存，只有当依赖的数据发生变化时，才会重新计算。
- 计算属性可以在模板中直接使用，就像普通的属性一样。
- 计算属性的定义使用computed关键字，并指定一个函数来计算属性的值。

使用计算属性（Computed Properties）：

<template>
  <div>
    <p>结果：{{ result }}</p>
    <button @click="add">加法</button>
    <button @click="subtract">减法</button>
    <button @click="multiply">乘法</button>
    <button @click="divide">除法</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
    };
  },
  computed: {
    result() {
      return this.num1 + this.num2;
    },
  },
  methods: {
    add() {
      this.num1 += 1;
    },
    subtract() {
      this.num1 -= 1;
    },
    multiply() {
      this.num1 *= 2;
    },
    divide() {
      this.num1 /= 2;
    },
  },
};
</script>

方法（Methods）：
- 方法是Vue.js中的函数，可以在模板中通过事件或指令来调用执行。
- 方法可以接收参数，可以根据需要传递参数来执行操作。
- 方法可以处理复杂的计算逻辑或异步操作。
- 方法的定义使用methods关键字，并指定一个对象，对象的每个属性都是一个方法。

使用方法（Methods）：

<template>
  <div>
    <p>结果：{{ getResult() }}</p>
    <button @click="add">加法</button>
    <button @click="subtract">减法</button>
    <button @click="multiply">乘法</button>
    <button @click="divide">除法</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
    };
  },
  methods: {
    getResult() {
      return this.num1 + this.num2;
    },
    add() {
      this.num1 += 1;
    },
    subtract() {
      this.num1 -= 1;
    },
    multiply() {
      this.num1 *= 2;
    },
    divide() {
      this.num1 /= 2;
    },
  },
};
</script>

监听器（Watchers）：
- 监听器是Vue.js提供的一种方式，用于监听数据的变化，并在变化时执行相应的操作。
- 监听器使用watch关键字来定义，可以监听一个或多个数据的变化。
- 监听器可以处理复杂的计算逻辑或异步操作。
- 监听器的定义使用一个对象，对象的每个属性都是一个监听器。

使用watch属性（Watchers）：

<template>
  <div>
    <p>结果：{{ result }}</p>
    <button @click="add">加法</button>
    <button @click="subtract">减法</button>
    <button @click="multiply">乘法</button>
    <button @click="divide">除法</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
      result: 0,
    };
  },
  watch: {
    num1(newVal, oldVal) {
      this.result = newVal + this.num2;
    },
    num2(newVal, oldVal) {
      this.result = this.num1 + newVal;
    },
  },
  methods: {
    add() {
      this.num1 += 1;
    },
    subtract() {
      this.num1 -= 1;
    },
    multiply() {
      this.num1 *= 2;
    },
    divide() {
      this.num1 /= 2;
    },
  },
};
</script>

v-model指令：
- v-model指令是Vue.js提供的一种实现双向数据绑定的方式。
- v-model指令可以在表单元素上使用，用于将表单元素的值与数据进行绑定。
- 当表单元素的值发生变化时，数据会自动更新；当数据发生变化时，表单元素的值也会自动更新。
- v-model指令可以用于input、select、textarea等表单元素。

使用v-model指令：

<template>
  <div>
    <p>结果：{{ num1 + num2 }}</p>
    <input v-model="num1" type="number" />
    <input v-model="num2" type="number" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
    };
  },
};
</script>

简单表达式（Simple Expressions）：
- 简单表达式是Vue.js中的一种语法，用于在模板中直接使用JavaScript表达式。
- 简单表达式可以用于模板中的插值表达式、属性绑定、事件绑定等地方。
- 简单表达式可以直接访问数据和计算属性，也可以执行简单的JavaScript代码。
- 简单表达式不支持复杂的逻辑运算和循环控制等。
  使用计算属性和v-model指令：

<template>
  <div>
    <p>结果：{{ result }}</p>
    <input v-model="num1" type="number" />
    <input v-model="num2" type="number" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
    };
  },
  computed: {
    result() {
      return this.num1 + this.num2;
    },
  },
};
</script>

这些方法都可以实现加减乘除运算，具体使用哪种方法取决于您的需求和项目的架构