如何解决如何在<input v-model = variable>中而不使用npm
但是我想添加数据掩码,看起来像这样
这是我要检索的代码,字段键薪水/ 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。