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