Vue中print_data.chrt_B1_Measures为空时如何隐藏对应p标签

问题原因 #

你的v-if判断逻辑写反了：!print_data.chrt_B1_Measures 代表当print_data.chrt_B1_Measures为假值（空、null、undefined等）时条件成立，p标签才会渲染，和你要的「空值时不显示」的需求完全相反。

正确实现方案 #

基础版（兼容Vue3/支持可选链的环境）

直接判断目标字段存在且为真值即可，可选链?.可以避免print_data未初始化时抛出undefined报错：

<p style="margin-left: 28px" v-if="print_data?.chrt_B1_Measures">
    <span>Solution：</span>
<br />
    <span class="ql-editor" v-html="print_data.chrt_B1_Measures"></span>
</p>

Vue2兼容版

Vue2模板中不支持可选链写法，改为多层判断即可：

<p style="margin-left: 28px" v-if="print_data && print_data.chrt_B1_Measures">
    <span>Solution：</span>
<br />
    <span class="ql-editor" v-html="print_data.chrt_B1_Measures"></span>
</p>

进阶：过滤全空白内容

如果需要排除仅包含空格/换行的空内容，新增trim判断即可：

<!-- Vue3版 -->
<p style="margin-left: 28px" v-if="print_data?.chrt_B1_Measures?.trim()">
    <span>Solution：</span>
<br />
    <span class="ql-editor" v-html="print_data.chrt_B1_Measures"></span>
</p>

<!-- Vue2版 -->
<p style="margin-left: 28px" v-if="print_data && print_data.chrt_B1_Measures && print_data.chrt_B1_Measures.trim()">
    <span>Solution：</span>
<br />
    <span class="ql-editor" v-html="print_data.chrt_B1_Measures"></span>
</p>

内容的提问来源于stack exchange，提问作者Peter