vue實(shí)現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet"  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
  
<div id="app">
  <div class="container">
    <div class="row">
      <div class="col-md-12" >
          <input type="number" value="" id="inputVal" v-model="message" placeholder="輸入數(shù)字" class="form-control" >
          <p>當(dāng)前輸入內(nèi)容為：{{ chinese }}</p>
      </div>
    </div>
  </div>

</div>
  
<script>
  var vm = new Vue({
    el : "#app",
    data : {
      message : "",
      chinese : ''
    
    },
    methods : {
      toChinese : function(values){
        let chin_list=['一','二','三','四','五','六','七','八','九','十'];//所有的數(shù)值對應(yīng)的漢字
        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>