Vue.js Filter格式化货币时如何将逗号后小数部分用span标签包裹

注意事项 #

• Vue 默认会对{{ }}插值的内容做HTML转义，直接返回带标签的字符串会被当做纯文本渲染，因此需要改用v-html指令来输出过滤后的内容
• 本次改造的内容全部为可控的数值格式化结果，无用户自定义输入内容，使用v-html不存在XSS安全风险

改造后的过滤器代码 #

Vue.filter('toTL', function (value) {
    // 先按原有规则格式化货币
    const formattedStr = new Intl.NumberFormat('tr-TR', { 
        currency: 'TRY', 
        minimumFractionDigits: 2
    }).format(value);
    // 按土耳其语的小数分隔符（逗号）拆分整数和小数部分
    const [integerPart, decimalPart] = formattedStr.split(',');
    // 拼接带span标签的结果返回
    return `${integerPart}<span>,${decimalPart}</span>`;
});

改造后的组件模板代码 #

<p class="amount" v-html="1500 | toTL"></p>

改造后渲染出的HTML结构完全符合预期：<p>1.500<span>,00</span></p>

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