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）使用标签。与使用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);
      }
    }
  }

抑制v-html包装标签

1 个答案: