仅在包含内容的情况下显示广告位

史蒂夫·鲍曼(Steve Bauman):

有什么方法可以只显示包含任何内容的广告位?

例如,我正在构建一个简单的Card.vue组件,并且只希望在页脚位置包含内容的情况下显示页脚:

模板:

<template>
    <div class="panel" :class="panelType">
        <div class="panel-heading">
            <h3 class="panel-title">
                <slot name="title">
                    Default Title
                </slot>
            </h3>
        </div>

        <div class="panel-body">
            <slot name="body"></slot>

            <p class="category">
                <slot name="category"></slot>
            </p>
        </div>

        <div class="panel-footer" v-if="hasFooterSlot">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

脚本:

<script>
    export default {
        props: {
            active: true,
            type: {
                type: String,
                default: 'default',
            },
        },

        computed: {
            panelType() {
                return `panel-${this.type}`;
            },

            hasFooterSlot() {
                return this.$slots['footer']
            }
        }
    }
</script>

在视图中:

<card type="success"></card>

由于上述组件不包含页脚,因此不应呈现,而应呈现。

我尝试使用this.$slots['footer'],但这返回未定义。

有人有提示吗?

伯特:

它应该可以在

this.$slots.footer

因此,这应该工作。

hasFooterSlot() {
  return !!this.$slots.footer
}

实例

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我可以在不创建课程的情况下创建广告位吗?

多个模板广告位的广告位内容相同

获取Vue广告位的渲染HTML内容作为变量

确定广告位内容为空还是空

如何以广告位形式显示存储时间?

仅在活动的情况下如何显示材料选项卡的内容?

如何包含部分但仅在尚未包含部分的情况下?

仅在列包含值的情况下使用SUBTOTAL

jQuery仅在具有类的情况下显示div

仅在标题相同的情况下突出显示重复项

默认情况下,Docker包含哪些内容?

Stencil.js渲染广告位内容,如果render()返回null

将事件从广告位中的内容发送到父级

html自定义元素,广告位内容附加在#shadow-root之后

BigQuery广告位配额是如何计算的?

从广告位刷新QML Listview

flutter 广告仅在测试模式下显示

在不压低内容的情况下显示图像

默认情况下,显示选中的RadioButton的内容

我可以在广告位内容上使用dom-repeat来将每个广告位子级包装在某个标签内吗?

包含重复的“内容”项。默认情况下,.NET SDK包含项目目录中的“内容”项

Python:创建基于广告位的广告资源系统

如何在内容中不包含用户名的情况下检查消息内容

仅在前一个元素包含类的情况下应用条件

仅在Linux中包含指定文件的情况下才复制目录

仅在相应列不包含所选关键字的情况下选择那些行

仅在单元格包含值的情况下运行公式

仅在祖先不包含特定类的情况下才能应用CSS吗?

如何仅在rethinkDB中不包含值的情况下追加到数组