Vue3中如何利用数组布尔值通过v-if控制内容显隐

问题场景 #

需要通过flightOptionData数组中每个对象的overnight布尔属性，控制<p>+1</p>元素的显示与隐藏，尝试使用v-if="{{item.overnight}}"的写法出现问题，需正确实现方式。

初始示例代码 #

<v-expansion-panel v-for="item in flightOptionData" :key="item.type" elevation="0" class="rounded-lg foExpansion">
    <v-expansion-panel-title class="pa-3 bg-card" v-slot="{ open }" expand-icon="" collapse-icon="">
        <section class="foCard">
            <p>{{item.finalPrice}}</p>
            <p>{{item.number}}</p>
            <p v-if="true" class="nextDay">+1</p>
        </section>
    </v-expansion-panel-title>
</v-expansion-panel>

<script>
    data() {
        return {
            flightOptionData: [
                { finalPrice: '5.431,00', number: 'A12314', overnight: true }, 
                { finalPrice: '5.431,00', number: 'A12314', overnight: false }
            ]
        }
    }
</script>

尝试的错误代码 #

<v-expansion-panel v-for="item in flightOptionData" :key="item.type" elevation="0" class="rounded-lg foExpansion">
    <v-expansion-panel-title class="pa-3 bg-card" v-slot="{ open }" expand-icon="" collapse-icon="">
        <section class="foCard">
             <p>{{item.finalPrice}}</p>
             <p>{{item.number}}</p>
             <p v-if="{{item.overnight}}" class="nextDay">+1</p>
        </section>
    </v-expansion-panel-title>
</v-expansion-panel>

<script>
    data() {
        return {
            flightOptionData: [
                { finalPrice: '5.431,00', number: 'A12314', overnight: true }, 
                { finalPrice: '5.431,00', number: 'A12314', overnight: false }
            ]
        }
    }
</script>

错误原因 #

Vue指令（如v-if）内部直接支持JavaScript表达式，无需用{{ }}插值语法包裹。{{ }}仅用于在文本节点中插入数据，放在指令属性值里会触发语法错误。

正确实现 #

去掉v-if中的{{ }}，直接使用表达式item.overnight即可：

<v-expansion-panel v-for="item in flightOptionData" :key="item.type" elevation="0" class="rounded-lg foExpansion">
    <v-expansion-panel-title class="pa-3 bg-card" v-slot="{ open }" expand-icon="" collapse-icon="">
        <section class="foCard">
            <p>{{item.finalPrice}}</p>
            <p>{{item.number}}</p>
            <p v-if="item.overnight" class="nextDay">+1</p>
        </section>
    </v-expansion-panel-title>
</v-expansion-panel>

<script>
    data() {
        return {
            flightOptionData: [
                { finalPrice: '5.431,00', number: 'A12314', overnight: true }, 
                { finalPrice: '5.431,00', number: 'A12314', overnight: false }
            ]
        }
    }
</script>

当item.overnight为true时，<p>+1</p>会显示；为false时则隐藏，完全符合需求。

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