element输入框与显示数据价格格式化

输入框输入时格式化

<div>
    价格：
    <el-input
      placeholder="请输入价格"
      v-model.trim="input1"
      oninput="value=value.replace(/[^0-9.]/g,'')" // 限制输入，仅可输入数字与.,且首位必须为数字（即为价格的输入限制）
      @change='data=>input1=toPrice(data)' // 输入回车后，变为格式化数据
      clearable>
      <i slot="prefix" style="color: black;font-style:normal;line-height: 33px;">￥</i>
    </el-input>
  </div>

格式化数据：

export function toPrice (val, type) { // 值，符号
  if (val === null || val === undefined || val === '') {
    return '—';
  } else {
    var data = Number(val).toFixed(2).split('.');
    var data2 = data[0].split('').reverse().join('');
    var newData = '';
    if (parseInt((data2.length - 1) / 3) > 0) {
      var count = 0;
      do {
        newData = newData + data2.slice(count * 3, count * 3 + 3) + ',';
        count = count + 1;
      } while (parseInt((data2.length - 1) / 3) >= count);
    }
    if (type) {
      return type + newData.split('').reverse().join('').slice(1) + '.' + data[1];
    } else {
      return newData.split('').reverse().join('').slice(1) + '.' + data[1];
    }
  }
}

格式化结果：
￥23,455.39

输入框无法输入

在el-input组件中加入@input="change($event)"，其中change方法内是change (e) {this.$forceUpdate(); }

显示价格格式化

法一：vue格式化包vue-text-format

1. 安装vue-text-format， npm install vue-text-format
2. 导入包

 import Vue from 'vue'
import format from 'vue-text-format';
Vue.use(format);

3. 自定义指令v-format，v-format="'¥#,##0.00'"

例子：

<div v-format="'¥#,##0.00'">{{input1}}</div>

法二：管道过滤

fliter:{
toPrice1(value,type) {
        if (typeof (value) === 'undefined' || value === null || value === '' || value === undefined) {
          return '-';
        } else {
          	var data = Number(value).toFixed(2).split('.');
		    var data2 = data[0].split('').reverse().join('');
		    var newData = '';
		    if (parseInt((data2.length - 1) / 3) > 0) {
		      var count = 0;
		      do {
		        newData = newData + data2.slice(count * 3, count * 3 + 3) + ',';
		        count = count + 1;
		      } while (parseInt((data2.length - 1) / 3) >= count);
		    }
		    if (type) {
		      return type + newData.split('').reverse().join('').slice(1) + '.' + data[1];
		    } else {
		      return newData.split('').reverse().join('').slice(1) + '.' + data[1];
		    }
        }
}

例子：

<div>{{input1|toPrice1}}</div>
或
<div>{{toPrice1(input1)}}</div>