如何在<input v-model = variable>中而不使用npm

问题描述

我可以使用vue js v模型从数据库中获取薪水数据

但是我想添加数据掩码，看起来像这样

这是我要检索的代码，字段键薪水/ gaji是两倍，我不知道如何使用vue js添加数据掩码，有人可以帮我吗？

<div class="form-row">

      <div class="form-group col-md-6">

         <label class="col-form-label">Salary</label>
         <input type="text" class="form-control" v-model="nasabah.form.salary">

      </div>

  </div>

解决方法

我希望这可以帮助：v-mask package

,

您可以使用computed来格式化输入中显示的值。

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',data: {
    rawSalary: 0
  },methods: {
    onChange(e) {
    this.rawSalary = e.target.value;
    }
  },computed: {
    formattedSalary() {
      return this.rawSalary.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",")
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label>Salary</label>
  <input type="text" :value="formattedSalary" @change="onChange">
  
  <div>rawSalary : {{ rawSalary }}</div>
</div>

,

您可以使用filter将数字格式化为货币，例如：

filters: {
  currencyFormat(val) {
    return (val).toFixed(2)
              .replace(/\d(?=(\d{3})+\.)/g,'$&,');
  }
}

使用管道在模板上使用它，例如：

<div>
  <input type="text" class="form-control" v-model="nasabah.form.salary | formatCurrency">
</div>

请注意，这将使您的salary属性的格式值发生变化

您可以详细了解here