Javascript 未关闭字符串文字-Vue JS模板简单连接

有人能解释为什么会这样吗？Vue新手，不知道怎么了

这项工作：

<template>
    <div>
        ...
        <div v-else>
            {{ remaining.hours > 0 ? (remaining.hours < 10 ? '0' : '') + remaining.hours + ':' : '' }}

但是，当我尝试添加跨度时，会出现“未闭合字符串文字”错误：

<template>
    <div>
        ...
        <div v-else>
            {{ remaining.hours > 0 ? (remaining.hours < 10 ? '0' : '') + remaining.hours + '<span class="colon">:</span>' : '' }}

---

花括号将数据解释为纯文本。对于HTML，请使用v-HTML指令：

<div v-else v-html="remainingHtml">

---

您可以创建一个JSFIDLE或codepen示例来重现错误吗？不允许在单引号内使用双引号。用倒勾代替。{{resisting.hours>0？resisting.hours<10？'0'：+resisting.hours+`:}}或在双引号{{{resisting.hours>0？resisting.hours<10？'0'：+resisting.hours+':}之前使用escape

computed : {
  remainingHtml () {
    return remaining.hours > 0 ? (remaining.hours < 10 ? '0' : '') + remaining.hours + '<span class="colon">:</span>' : '' :
  }
}