如何在带有 vue 绑定的输入文本框中使用 JQuery inputmask？答案

【问题标题】：How to use JQuery inputmask on input text box with vue binding?如何在带有 vue 绑定的输入文本框中使用 JQuery inputmask？
【发布时间】：2019-10-24 10:40:54
【问题描述】：

我正在尝试在具有 vue js 绑定的输入文本框中使用 JQuery inputmask，但是当我更改该页面中的下拉菜单时，输入文本会被清除，是否有任何最佳实践将 inputmask 与 vue js 一起使用？此外，我不希望掩码字符出现在我的绑定模型值中。

在html代码中：

 <input asp-for="PrimaryPhone" v-model="Model.primaryPhone" class="form- 
   control js-form-element viewcomponent-modal-field-box tel" aria-describedby="PrimaryPhoneInput">

在javascript中：

$('input:text.tel').inputmask('(999) 999-9999', { placeholder: ""});

【问题讨论】：

为什么在 VueJS 中使用 jQuery？不建议将 jQuery 与 VueJS 一起使用，并且可能会产生一些不良影响，特别是当 jQuery 修改 DOM 时。也许尝试使用 ES6 或 vanilla JS 来做到这一点

标签： jquery vue.js jquery-inputmask

【解决方案1】：

为了更简单，请尝试使用this v-mask module of Vue

只需按照文档说明导入它，然后像这样在输入中指定您的掩码

<input asp-for="PrimaryPhone" v-model="Model.primaryPhone" class="form-control js-form-element viewcomponent-modal-field-box tel" aria-describedby="PrimaryPhoneInput" v-mask="'(###) ###-####'">

【讨论】：