Vue.js 버튼으로 카운터 업 다운 만들기

Vue.js

Vue.js 버튼으로 카운터 업 다운 만들기

록's 2022. 12. 29. 11:21

728x90

첫번째

카운트 업 버튼을 클릭시 1씩 증가하여 횟수가 올라가는 버튼을 만들어보면.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js sample</title>
  <link rel="stylesheet" href="style.css">
  <!-- CDM 연결-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
  <h2>클릭하면 카운터가 올라갑니다.</h2>
  <div id="app">
    <p> {{count}}회 </p>        <!-- {{mustache}} -->
    <button v-on:click="countUp">카운터 업</button>
    <button v-on:click="countDown">카운터 다운</button>
  </div>

  <script>
    new Vue({
      el: "#app",
      data: {
        count:0
      },
      methods: {
        countUp: function() {
          this.count++;
        },
        countDown: function() {
          this.count--;
        }
      }
    })
    

  </script>
</body>
</html>

입력하고 라이브 서버로 열어보면

두번째

이번에는 카운터 버튼을 업 다운 두개의 버튼을 만들어 업버튼을 누르면 1씩 증가하고 다운 버튼을 누르면

1씩 감소하는 프로그램을 만들어보면

		<h2>클릭하면 카운터가 올라가고 내려갑니다.</h2>
		<div id="app">
			<p> {{count}}회</p>
			<button v-on:click="countUp">카운터 업!</button>
			<button v-on:click="countDown">카운터 다운!</button>
		</div>
		
		<script>
		new Vue({
			el: "#app",
			data: {
				count:0
			},
			methods: {
				countUp: function() {
					this.count++;
				},
				countDown: function () {
					this.count--;
				}
			}
		})
		</script>

코드를 입력하고 라이브서버로 열면

728x90