记得引入vue.js文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用vue将数字转为中文大写金额</title>
<script src='vue.js'></script>
</head>
<body>
<div id="box">
<h1 v-if='flag'>我已经限制长度了,放弃吧</h1>
<h1 v-if='flag'><button @click='shutDown'>关闭</button></h1>
<input type="text" v-model='inputVal'>
<!--<button @click='to_ch'>转换</button>-->
{{inputVal | toChies}}
<!--过滤器-->
</div>
</body>
<script>
var app = new Vue({
el:"#box",
data:{
inputVal:'',
flag:false,
values:''
},
filters:{//局部过滤器
toChies:function(values){//形参
let len=values.length//统计出长度
let arr=[];
let chin_list=['零','壹','贰','叁','肆','伍','陆','柒','捌','玖']//所有的数值对应的汉字
let chin_lisp=['仟','佰','拾','亿','仟','佰','拾','万','仟','佰','拾']//进制
for(let i=0;i<len;i++){
arr.push(parseInt(values[i])); //输入的数据按下标存进去 存进去的只是数字
arr[i]=chin_list[arr[i]] //是根据我们输入的输入的数字,对应着我们的chin_list这个数组
}//123['壹','佰','贰','拾','叁']
for(let i=len-1,j=1;i>0;i--){//i =2 1 //倒序 为了添加进制,方便我们去观看
arr.splice(i,0,chin_lisp[chin_lisp.length-j++]) //j=2
}
console.log(arr)
arr=arr.join('')
if(len>=1){
arr+='元整'
}
return arr
}
},
watch:{
inputVal(newVal,oldVal){
if(newVal.length==13){
this.inputVal=oldVal
this.flag=true
}
}
},
methods:{
shutDown(){
this.flag=false
},
to_ch(){
console.log(this.inputVal)
this.inputVal=this.values
}
}
})
</script>
</html>