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

更新時(shí)間：2019年12月13日 10:51:31 作者：RightHereWaitingFY

這篇文章主要介紹了vue實(shí)現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet"  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="輸入數(shù)字" class="form-control" style="margin-bottom:30px;">
          <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>

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果(示例代碼)
這篇文章主要介紹了vue中實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-02-02
wepy--用vantUI 實(shí)現(xiàn)上彈列表并選擇相應(yīng)的值操作
這篇文章主要介紹了wepy--用vantUI 實(shí)現(xiàn)上彈列表并選擇相應(yīng)的值操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue+canvas實(shí)現(xiàn)炫酷時(shí)鐘效果的倒計(jì)時(shí)插件（已發(fā)布到npm的vue2插件，開箱即用）
這篇文章主要介紹了vue+canvas實(shí)現(xiàn)炫酷時(shí)鐘效果的倒計(jì)時(shí)插件（已發(fā)布到npm的vue2插件，開箱即用） ,需要的朋友可以參考下
2018-11-11
手寫實(shí)現(xiàn)vue2下拉菜單dropdown組件實(shí)例
這篇文章主要為大家介紹了手寫vue2下拉菜單dropdown組件實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue?elementui動(dòng)態(tài)添加el-input實(shí)例代碼
最近遇到一個(gè)新的需求,需要?jiǎng)討B(tài)添加el-input,這篇文章主要給大家介紹了關(guān)于vue?elementui動(dòng)態(tài)添加el-input的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
詳解Vue中watch的詳細(xì)用法
在vue中，使用watch來響應(yīng)數(shù)據(jù)的變化。watch的用法大致有三種。下面代碼是watch的一種簡單的用法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-11-11
使用Webpack提升Vue.js應(yīng)用程序的4種方法（翻譯）
這篇文章主要介紹了使用Webpack提升Vue.js應(yīng)用程序的4種方法（翻譯），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
vue init webpack myproject構(gòu)建項(xiàng)目 ip不能訪問的解決方法
下面小編就為大家分享一篇vue init webpack myproject構(gòu)建項(xiàng)目 ip不能訪問的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問題及解決
這篇文章主要介紹了vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue3.4中v-model雙向數(shù)據(jù)綁定新玩法詳解
defineModel?是一個(gè)新的?<script?setup>?宏,旨在簡化支持?v-model?的組件的實(shí)現(xiàn),?這個(gè)宏用來聲明一個(gè)雙向綁定?prop,下面我們就來看看他的具體使用吧
2024-03-03