vue 단순 가산 기 실현

1750 단어 vue계산기
본 논문 의 사례 는 vue 가 간단 한 가산 기 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
두 걸음 만 간단하게.
1.템 플 릿 구조,디자인 인터페이스
2.처리 데이터 와 제어 논리

코드:

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <div id="app">
 <div>
  <h1>     </h1>
  <div>
  <span>  A:</span>
  <span>
   <input type="text" v-model='a'>//  v-model      a   
  </span>
  </div>
  <div>
  <span>  B:</span>
  <span>
   <input type="text" v-model='b'>//  v-model      b   
  </span>
  </div>
  <div>
  <button @click='handle'>  </button>
  </div>
  <div>
  <span>    :</span>
  <span v-text='result'></span>
  </div>
 </div>
 </div>
 <script type="text/javascript" src="vue.js"></script>
 <script type="text/javascript">
 var vm = new Vue({
  el: '#app',
  data: {
  a: '',
  b: '',
  result:''
  },
  methods: {
  handle: function(){
   //      
   this.result = parseInt(this.a) + parseInt(this.b);
  }
  }
 })
 </script>
</body>
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기