vue-masked-input插件配合Pug使用时功能异常问题求助

问题根因 #

Pug 解析单引号包裹的静态属性值时，会优先处理字符串中的转义字符。你代码中写的\+\1在经过Pug编译后，反斜杠转义符会被直接消费，最终传递给vue-masked-input的mask实际值为+1 (111) 111-1111，缺少了插件识别掩码规则所需的转义标记，因此功能异常。

修复方案 #

方案1：双层转义转义符

给mask属性中的反斜杠再加一层转义，确保Pug编译后能保留插件需要的转义标记：

<template lang="pug">
masked-input(
  v-model='phone_number' 
  mask='\\+\\1 (111) 111-1111' 
  placeholder-char='_' 
  placeholder='+1 (555) 555-5555' 
  type='tel'
)
</template>

方案2：动态属性绑定（更稳妥）

使用Vue的v-bind语法传递mask值，将规则写在JS字符串中，避开Pug的静态属性转义解析逻辑：

<template lang="pug">
masked-input(
  v-model='phone_number' 
  :mask="'\\+\\1 (111) 111-1111'" 
  placeholder-char='_' 
  placeholder='+1 (555) 555-5555' 
  type='tel'
)
</template>

内容的提问来源于stack exchange，提问作者uneeb meer