vue實(shí)現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能
更新時(shí)間：2019年12月13日 10:51:31 作者：RightHereWaitingFY
這篇文章主要介紹了vue實(shí)現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能，本文通過(guò)實(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ù)值對(duì)應(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)漢字功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法
這篇文章主要給大家介紹了關(guān)于vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法,Vue3是目前前端開(kāi)發(fā)中非常流行的框架之一,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue日志之如何select選中默認(rèn)值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue路由守衛(wèi)及頁(yè)面登錄權(quán)限控制的設(shè)置方法(兩種)
這篇文章主要介紹了Vue路由守衛(wèi)及頁(yè)面登錄權(quán)限控制的設(shè)置方法,本文通過(guò)實(shí)例代碼通過(guò)兩種方法給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue中的provide / inject 有什么用處,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-11
vue項(xiàng)目中路徑使用@和~的區(qū)別及說(shuō)明
這篇文章主要介紹了vue項(xiàng)目中路徑使用@和~的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue-router跳轉(zhuǎn)時(shí)打開(kāi)新頁(yè)面的兩種方法
這篇文章主要給大家介紹了關(guān)于vue-router跳轉(zhuǎn)時(shí)打開(kāi)新頁(yè)面的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-router具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
解決vue的touchStart事件及click事件沖突問(wèn)題
這篇文章主要介紹了解決vue的touchStart事件及click事件沖突問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue from-validate 表單驗(yàn)證的示例代碼
本篇文章主要介紹了Vue from-validate 表單驗(yàn)證的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
基于Vant UI框架實(shí)現(xiàn)時(shí)間段選擇器
這篇文章主要為大家詳細(xì)介紹了基于Vant UI框架實(shí)現(xiàn)時(shí)間段選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
vite+vue3中require?is?not?defined問(wèn)題及解決
這篇文章主要介紹了vite+vue3中require?is?not?defined問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05