vue 디지털 한자 변환 입력 기능 실현

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
<div id="app">
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="padding:50px 200px;">
          <input type="number" value="" id="inputVal" v-model="message" placeholder="    " class="form-control" style="margin-bottom:30px;">
          <p>       ：{{ chinese }}</p>
      </div>
    </div>
  </div>

</div>
  
<script>
  var vm = new Vue({
    el : "#app",
    data : {
      message : "",
      chinese : ''
    
    },
    methods : {
      toChinese : function(values){
        let chin_list=[' ',' ',' ',' ',' ',' ',' ',' ',' ',' '];//          
        let sn = parseInt(values);
        this.chinese = chin_list[sn-1];
      }
    },
    watch : {
      message(newVal,oldVal){
        console.log(newVal)
        var reg = /^\d{1}$/;
        if(!reg.test(newVal)){
          if(newVal == ''){
            this.message = '';
            return;
          }
          this.message = oldVal
        }else{
          this.toChinese(newVal)
        }
      }
    }
  })
</script>

총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 vue 가 한 자 를 입력 하 는 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.만약 에 궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!