当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue实现输入一位数字转汉字功能

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

2020年03月09日  | 移动技术网IT编程  | 我要评论 

<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实现输入一位数字转汉字功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网