前端vue金额用逗号分隔

实现效果

代码

template部分

<el-input v-model="state.val"></el-input>
  <div>
    {{ priceFor(state.val) }}
  </div>

js部分

const state = reactive({
val:''
});

const priceFor = (val)=> {
  if(!val){
    return ''
  }else if(val.length<4){
    return val
  }else {
    let str = val+''
    let numList = []
    for(let i = 1;i<=str.length;i=i+0){
      if(str.length>=4){
        numList.unshift(str.substring(str.length - 3, str.length))
        str = str.slice(0, -3)
      }else {
        numList.unshift(str)
        str = ''
      }
    }
    return numList.join(',')
  }
}