Vue filter 过滤器文本格式化返回0

项目场景：

对于后端返回为空的数据，前端文本需要显示为两个中划线–。想到了应用Vue的过滤器。但是实际应用中发现同一个过滤器有的正常返回，有的展示的是0

---

问题描述：

前端展示时需要将模板字符串过滤器拼接起来展示，这种情况下，过滤器返回的时0。我想要的是–分钟，而返回的是0分钟。

<template>
	<span>{{ `${ msg | formatText }${ times_unit }` }}</span>
</template>

filters: {
   // 格式化文本，没有值或者为空时显示--
   formatText(value) {
     if (!value) return '--'
     return value
   }
 },
data(){
	return {
		msg: ' ',
      	times_unit: '分钟'
	}
}

---

原因分析：

翻阅Vue的官方文档，我们会发现过滤器只适用于双花括号插值和 v-bind 表达式 。所以在和模板字符串拼接时就会有问题。出现展示为0的情况。本来是为了图省事儿，引发这个问题

---

解决方案：

只需要将模板字符串和过滤器的使用拆分成单个的双花括号即可解决问题。

<template>
	<span>{{ msg | formatText }} {{times_unit}}</span>
</template>