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


Posted in Javascript onDecember 13, 2019

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实现输入一位数字转汉字功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
javascript包装对象实例分析
Mar 27 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 #Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 #Javascript
微信小程序点击保存图片到本机功能
Dec 13 #Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 #Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 #Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 #Javascript
使用uni-app开发微信小程序的实现
Dec 13 #Javascript
You might like
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
php时间不正确的解决方法
2008/04/09 PHP
深入apache host的配置详解
2013/06/09 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
详解Python的Django框架中的通用视图
2015/05/04 Python
Python快速从注释生成文档的方法
2016/12/26 Python
Python中正则表达式详解
2017/05/17 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
python两种注释用法的示例
2020/10/09 Python
平面设计师工作职责范文
2013/12/03 职场文书
出生证明公证书
2014/04/09 职场文书
企业晚会策划方案
2014/05/29 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
党员读书活动心得体会
2016/01/14 职场文书