如何删除带有v-if的新行

Question

我想在句子中间放一个v-if。但是，我不希望在这句话中间创建一个新行。

这是我想要的:

A/B/C/D

我有:

A/B

/C

/D

下面是我的代码:

<div>
{{ A }} / {{ B }} <p v-if="function()"> / {{ C }} </p> / {{ D }}
</div>

你有什么解决办法吗?

Answer 1

使用<template v-if>代替实际的DOM节点:

[…一个<template>元素，它作为一个不可见的包装器。最终渲染结果将不包含<template>元素。

<div>
{{ A }} / {{ B }} <template v-if="function()"> / {{ C }} </template> / {{ D }}
</div>

Answer 2

据我所知，这只是一个风格问题。<p>标签默认是一个块(display: block)。使用<span>标签代替:

<div>
{{ A }} / {{ B }} <span v-if="function()"> / {{ C }} </span> / {{ D }}
</div>

或者你也可以给它应用display: inline:

p {
display: inline;
}