javascript - 未封闭的字符串文字 - Vue JS 模板简单串联

Question

谁能解释一下为什么会发生这种情况？ 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>' : '' }}

Answer 1

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

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

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

https://v2.vuejs.org/v2/guide/syntax.html