抑制 v-html 包装标签

Question

考虑以下代码。我想切换摘录和描述。下面的代码就是这样做的，但这意味着<a>在文章的外面，我更喜欢在里面。

<article v-if="!toggle" v-html="item.excerpt"></article>
<a href="#" v-if="!toggle" @click.prevent="toggle = 1">Read more...</a>

<article v-if="toggle" v-html="item.description"></article>
<a href="#" v-if="toggle" @click.prevent="toggle = 0">Show less...</a>

可以改写为

<article v-if="!toggle">
  <span v-html="item.excerpt"></span>
  <a href="#" @click.prevent="toggle = 1">Read more...</a>
</article>

<article v-if="toggle">
  <span v-html="item.description"></span>
  <a href="#" @click.prevent="toggle = 0">Show less...</a>
</article>

但这意味着摘录/描述用<span>. 有没有办法使用v-html指令而不输出包装标签？

Answer 1

我会喜欢做的是（不工作）

  <article v-if="toggle">
    <template v-html="item.description"></template>
    <a href="#" @click.prevent="toggle = 0">Show less...</a>
  </article>

但事实证明，使用template这种方式只适用于控制流指令（v-for和v-if）。所以我想知道是否可以通过向template标签添加控制流指令来绕过它（也不起作用）

  <article v-if="toggle">
    <template v-if="toggle" v-html="item.description"></template>
    <a href="#" @click.prevent="toggle = 0">Show less...</a>
  </article>

或者把v-html放在article标签上（当然不是）

  <article v-if="toggle" v-html="item.description">
    <a href="#" @click.prevent="toggle = 0">Show less...</a>
  </article>

这给我留下了两个我知道可行的选择：

(1) 使用标签。使用 a 的一个细微改进span是使用自定义标签，浏览器保证不会以任何方式默认样式。该标签包含在 HTML 中，但与具有裸 HTML 相比不会影响显示。

 <article v-if="toggle">
    <non-styled v-html="item.description"></non-styled>
    <a href="#" @click.prevent="toggle = 0">Show less...</a>
  </article>

(2) 使用自定义指令。尽管v-html替换了其元素的整个innerHTML，但您当然可以编写一个指令将其值插入其元素的开头（或结尾）而不是删除其他所有内容。

  <article v-if="toggle" v-start-with-html="item.description">
    <a href="#" @click.prevent="toggle = 0">Show less...</a>
  </article>

这是一个非常简单的命令，尽管我确信我的实现在处理节点更新方面没有经过深思熟虑。

  directives: {
    startWithHtml: {
      inserted(el, binding) {
        el.insertAdjacentHTML('afterbegin', binding.value);
      }
    }
  }