欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue实现输入一位数字转汉字功能

程序员文章站 2022-06-25 13:03:27
<...

vue实现输入一位数字转汉字功能

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/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实现输入一位数字转汉字功能,希望对大家有所帮助