vue實(shí)現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能
更新時間：2019年12月13日 10:51:31 作者：RightHereWaitingFY
這篇文章主要介紹了vue實(shí)現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
<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)漢字功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果(示例代碼)
這篇文章主要介紹了vue中實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
wepy--用vantUI 實(shí)現(xiàn)上彈列表并選擇相應(yīng)的值操作
這篇文章主要介紹了wepy--用vantUI 實(shí)現(xiàn)上彈列表并選擇相應(yīng)的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue+canvas實(shí)現(xiàn)炫酷時鐘效果的倒計(jì)時插件（已發(fā)布到npm的vue2插件，開箱即用）
這篇文章主要介紹了vue+canvas實(shí)現(xiàn)炫酷時鐘效果的倒計(jì)時插件（已發(fā)布到npm的vue2插件，開箱即用） ,需要的朋友可以參考下2018-11-11
手寫實(shí)現(xiàn)vue2下拉菜單dropdown組件實(shí)例
這篇文章主要為大家介紹了手寫vue2下拉菜單dropdown組件實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue?elementui動態(tài)添加el-input實(shí)例代碼
最近遇到一個新的需求,需要動態(tài)添加el-input,這篇文章主要給大家介紹了關(guān)于vue?elementui動態(tài)添加el-input的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
在vue中，使用watch來響應(yīng)數(shù)據(jù)的變化。watch的用法大致有三種。下面代碼是watch的一種簡單的用法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2018-11-11
使用Webpack提升Vue.js應(yīng)用程序的4種方法（翻譯）
這篇文章主要介紹了使用Webpack提升Vue.js應(yīng)用程序的4種方法（翻譯），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(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不能訪問的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問題及解決
這篇文章主要介紹了vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3.4中v-model雙向數(shù)據(jù)綁定新玩法詳解
defineModel?是一個新的?<script?setup>?宏,旨在簡化支持?v-model?的組件的實(shí)現(xiàn),?這個宏用來聲明一個雙向綁定?prop,下面我們就來看看他的具體使用吧2024-03-03