vue.js 제출 단추 시 간단 한 if 판단 식 상세 설명

머리말
본 고 는 주로 vue.js 제출 단 추 를 누 를 때 간단 한 if 판단 식 과 관련 된 내용 을 소개 하고 여러분 이 참고 하여 공부 할 수 있 도록 공유 하 는 간단 한 업무 수요 입 니 다.아래 는 더 이상 말 하지 않 겠 습 니 다.그림 을 보고 말 하 겠 습 니 다.
1:충전 금액 을 기입 하지 않 았 을 때 Toast 작은 탄 상자 에서"유효한 충전 금액 을 입력 하 세 요"라 는 알림 이 있 습 니 다.

if (!this.money)
    {
     console.log('money',money);
     Toast({
      message: '          ',
      duration: 2000
     });
    }

2:두 번 째 상자 의 실제 수령 금액 을 기입 하지 않 았 을 때 Toast 작은 탄 상자 가"유효한 실제 지불 금액 을 입력 하 세 요"라 고 알려 줍 니 다.

 else if (!this.moneyReal)
    {
     console.log('moneyReal',moneyReal);
     Toast({
      message: '          ',
      duration: 2000
     });
    }

3:두 입력 상 자 를 모두 작성 하면 Message Box 문의 상자 가 팝 업 됩 니 다.

else
    {
     MessageBox.confirm('       ?', '  ').then(action => {
     });
    }

구체 적 인 demo 는 다음 과 같 습 니 다.

<template>
 <div class="app">

  <mt-field label="    " id="money" placeholder="   " v-model="money" type="number"></mt-field>
  <mt-field label="    " id="moneyReal" placeholder="   " v-model="moneyReal" type="number"></mt-field>
  <div class="rechage">
   <button @click="chongZhiForMember">   </button>
  </div>
 </div>
</template>

<script>
 import { Field, MessageBox, Toast } from 'mint-ui';
 export default {
  data() {
   return {

    //      
   }
  },
  methods: {

   chongZhiForMember() {
    if(!this.money) {
     console.log('money', money);
     Toast({
      message: '          ',
      duration: 2000
     });
    } else if(!this.moneyReal) {
     console.log('moneyReal', moneyReal);
     Toast({
      message: '          ',
      duration: 2000
     });
    } else {
     MessageBox.confirm('       ?', '  ').then(action => {

     });
    }
   }
  },

 }
</script>
<style scoped>
 .app {
  background: #F1F1F1;
  height: 17.78rem;
 }
 
 .rechage button {
  outline: none;
  border: none;
  height: 1rem;
  width: 3.5rem;
  font-size: 0.5rem;
  color: white;
  background: #449EF4;
  border-radius: 0.15rem;
 }
 
 .rechage {
  text-align: center;
  margin-top: 1rem
 }
</style>

총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.