Javascript 如何在HTML预标记中隐藏空行？

我正在开发表单生成器，我希望在代码语法中有条件地显示属性。为此，我使用了

标记

<pre class="CodeBackground">&lt;template&gt;
    &lt;v-form ref=&quot;Form&quot;&gt; 
        &lt;v-container class=&quot;text-center&quot;&gt;<span v-for="(Field, index) in Fields" :key="index">
            {{Field.Type === 'TextField' ? "&lt;v-text-field " : ''}}
                {{FormSettings.Dense === true ? 'dense' : null}}
                {{FormSettings.InputStyle === 'Filled' ? 'filled' : null}}{{FormSettings.InputStyle === 'Solo' ? 'solo' : null}}{{FormSettings.InputStyle === 'Outlined' ? 'outlined' : null}}</span>
        &lt;/v-container&gt;
    &lt;/v-form&gt;
&lt;/template&gt;</pre>

我有条件地显示属性，如果不存在任何内容（null），我不想显示任何内容，但pre-tag会呈现一个空行

我使用的是Vue模板样式

我的代码

<template>
    <v-form ref="Form"> 
        <v-container class="text-center">
            <v-text-field 


        </v-container>
    </v-form>
</template>

模板
v-form ref=“form”
v-container class=“文本中心”
{{Field.Type=='TextField'？“v-text-Field”：“}
{{FormSettings.densed==true？'densed'：null}
{{FormSettings.InputStyle=='Filled'？'Filled'：null}{{{FormSettings.InputStyle=='Solo'？'Solo'：null}}{{FormSettings.InputStyle==='Outlined'？'Outlined'：null}
/v形容器
/v型
/模板

输出（如果没有条件为false）：

使用条件渲染谢谢你的评论，但这不是我想要的。我想根据一个条件显示代码中的空白字符。考虑到您处理的是空行，我猜您可以使用else语句。我想你可以尝试注释你的代码之间的空格（断线），或者完全删除它们（意思是所有的东西都在一行代码中而没有任何断线）。这会使我的代码变脏，但我想我没有其他选择。使用条件呈现谢谢你的评论，但这不是我想要的。我想根据一个条件显示代码中的空白字符。考虑到您处理的是空行，我猜您可以使用else语句。我想你可以尝试注释你的代码之间的空格（断线），或者完全删除它们（意思是所有的东西都在一行代码中而没有任何断线）。它使我的代码变得肮脏，但我想我没有任何其他选择。
<template>
    <v-form ref="Form"> 
        <v-container class="text-center">
            <v-text-field      
        </v-container>
    </v-form>
</template>