Vue中如何为绑定store状态的输入框:value添加后缀符号/文本？

当然可以直接在:value绑定表达式里实现末尾添加符号/文本的需求，分两步处理就能搞定：

1. 渲染时拼接符号 #

直接在绑定的数组元素后面拼接你需要的文本即可，比如加%：

<input 
 type="text" 
 class="text-center" 
 :value="(filtersStore.absorptionValue[0] || '') + '%'"
 @input="event => filtersStore.handleAbsortionValue(event.target.value.replace('%', ''))"
>

• 用(filtersStore.absorptionValue[0] || '')是为了避免数组元素为空/undefined时，渲染出undefined%这种奇怪的内容。
• 如果是其他符号，把%换成你需要的文本就行，比如'元'、'个'。

2. 输入时清除符号再同步到Store #

注意：如果直接把输入框的内容（带%）传给Store，下次渲染时会再次拼接%，导致出现10%%这种重复的情况。所以必须在@input时先把符号去掉，再传给处理函数：

• 上面的示例里用event.target.value.replace('%', '')直接清除所有%，确保传给Store的是纯数值/文本。
• 如果你需要更严谨的处理（比如只去掉末尾的%），可以用正则：event.target.value.replace(/%$/, '')。

第二个输入框同理 #

针对数组的第二个元素，只需要把索引改成1即可：

<input 
 type="text" 
 class="text-center" 
 :value="(filtersStore.absorptionValue[1] || '') + '%'"
 @input="event => filtersStore.handleAbsortionValue(event.target.value.replace('%', ''), 1)"
>

这里假设你的handleAbsortionValue函数支持第二个参数来指定修改数组的哪个索引（如果原来的函数只处理第一个元素，需要调整函数逻辑来接收索引参数）。

内容的提问来源于stack exchange，提问作者Luis Fernando Perez Varajas