Vue JS에서 속성을 사용하는 간단한 계산기 [초보자]

이 기사는 아래 애니메이션과 유사한 이벤트를 사용하지 않고 일반 속성과 계산된 속성의 조합으로 사용하는 것만으로도 Vue JS에서 간단한 계산기를 만드는 것이 얼마나 쉬운지 보여줍니다.



vue 템플릿에서 4개의 HTML 요소를 선언합니다.

1호용

옵션으로 4개의 피연산자( +, -, * ,/) 포함

2호용

결과를 위해.

<template>
<section>
  <input placeholder="num1" type="number">
  <select > 
    <option value="+"> + </option>
    <option value="-"> - </option>
    <option value="*"> * </option>
    <option value="/"> / </option>
  </select>
  <input placeholder="num2" type="number" >
  <h2></h2>
  </section>
<template>

그런 다음 이 구성 요소 내에서 4개의 속성을 선언합니다. data() 모델 내에서 3개, 계산된 속성 중 하나입니다.

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

그런 다음 피연산자 속성을 제외하고 숫자 수정자와 함께 v-model 지시문을 사용하여 이 세 가지 속성을 입력 필드에 바인딩합니다.

숫자 수정자는 템플릿 외부에서 변환할 필요가 없도록 num1 및 num2 속성의 값을 숫자로 변환합니다.

<input placeholder="num1" type="number" v-model.number="num1">
<select v-model="operand" > 
  <option value="+"> + </option>
  <option value="-"> - </option>
  <option value="*"> * </option>
  <option value="/"> / </option>
</select>
<input placeholder="num2" type="number" v-model.number="num2">

계산을 구현하는 방법에는 여러 가지가 있지만 가장 간단한 방법은 계산 속성을 사용하는 것입니다.

계산된 속성은 data() 모델에 선언된 기존 속성에서 새 데이터를 만드는 좋은 방법입니다.

또한 내부에서 사용된 속성이 변경된 경우 계산된 속성 내부의 작업을 반응적으로 재계산할 수 있습니다.

computed: {
  result() {
    switch(this.operand) {
      case "+":
        return this.num1 + this.num2
      case "-":
        return this.num1 - this.num2
      case "*":
        return this.num1 * this.num2
      case "/":
        return this.num1 / this.num2
    }
  }
}

num1, num2 또는 피연산자 속성에서 데이터가 변경될 때마다 결과 계산 속성은 피연산자를 기반으로 num1 및 num2를 다시 계산하고 적절한 결과를 반환합니다.

그런 다음 템플릿에서 결과를 사용할 수 있습니다.

<h2> {{result}} </h2>