vue 카운터 단순 제작 실현

2528 단어 vue카운터
본 논문 의 사례 는 vue 실현 카운터 의 간단 한 실현 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
프로 세 스 주의사항
  • vue 인 스 턴 스 를 만 들 때:el(마 운 트 지점)data(데이터)methods(방법).
  • v-on 명령 의 역할 은 바 인 딩 이벤트 이 고 약자 로@입 니 다.
  • 방법 에서 this 키 워드 를 통 해 data 의 데 이 터 를 얻 습 니 다.
  • v-text 명령 의 역할 은 요소 의 텍스트 값 을 설정 하고{{}로 간략하게 쓰 는 것 입 니 다.
  • v-html 명령 의 역할 은 요 소 를 설정 하 는 innerHTML 입 니 다.
  • 실제 코드 와 캡 처
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>   </title>
    </head>
    <body>
        <div id="app">
            <!--       -->
            <div class="input-num">
                <button @click="sub">
                    -
                </button>
                <span>{{num}}</span>
                <button @click="add">
                    +
                </button>
            </div>
        </div>
            <!--       ,             -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //vue  
        var app = new Vue({
            el:"#app",
           data: {
                num:1
           },
           methods: {
               add:function(){
                   //console.log('add')
                   if(this.num<10){
                    this.num++; 
                   }else{
                    alert('   ,   !');
                   }
               },
               sub:function(){
                   //console.log('sub')
                   if(this.num>0){
                    this.num--; 
                   }else{
                    alert('   ,   !');
                   }
               }
           },
        })
    </script>
    </body>
    </html>


    vue.js 구성 요소 에 대한 튜 토리 얼 은 주제 vue.js 구성 요소 학습 강좌 을 클릭 하여 학습 하 십시오.
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기