如何在使用 VueJS（在移动设备上）单击 X 时关闭横幅答案

【问题标题】：How to close a banner on clicking X with VueJS (on mobile)如何在使用 VueJS（在移动设备上）单击 X 时关闭横幅
【发布时间】：2021-07-24 21:08:13
【问题描述】：

我是 VueJS 的新手。我在这里有一个组件，用于显示在我的页面的移动版本上的横幅。我想在单击 X 图标时关闭它。我怎么能做到这一点？我需要一个按钮吗？

<template>
    <div class="mobile-banner">
        <div class="container card">
            <div class="row">
                <div class="column one">
                    <drag-icon></drag-icon>
                </div>
                <div class="column two">
                    <ul>
                        <li>
                            Insctructions
                        </li>
                    </ul>
                </div>
                <div class="column three">
                    <div class="x-icon" />
                </div>
            </div>
        </div>
    </div>
</template>

这里还有一些风格：

<style lang="scss" scoped>
.mobile-banner {
    width: 100%;
    position: fixed;
    z-index: $mobile-instructions-banner;
    background-color: $greyF;
    color: $grey0;
}
.container {
    display: flex;
    justify-content: center;
}
.x-icon:before {
    content: "\2715";
}
</style>

【问题讨论】：

标签： javascript css vue.js sass

【解决方案1】：

您可以通过data、v-if 和v-on:click 实现此目的

1.数据

在 data 选项中创建一个布尔变量并将其值设置为 true。

<script>
 export default {
  name: 'MobileBanner',
  data () {
    return {
        isBanner: true
    }
  }
}
</script>

2。 v-如果

添加 v-if 指令以有条件地呈现横幅：

<div v-if="isBanner" class="mobile-banner">

由于我们在步骤 1 中将 'isBanner' 值设置为 true，因此横幅现在将在组件加载时呈现。

3. v-on:点击

我们现在可以使用 onclick 事件处理程序 v-on:click（或简称为 @click） 将 'isBanner' 值设置为 false，这将销毁/删除横幅：

<div class="x-icon" @click="isBanner = false" />

【讨论】：

【解决方案2】：

<div class="mobile-banner" :class={active: bannerStatus}>
        <div class="container card">
            <div class="row">
                <div class="column one">
                    <drag-icon></drag-icon>
                </div>
                <div class="column two">
                    <ul>
                        <li>
                            Insctructions
                        </li>
                    </ul>
                </div>
                <div class="column three">
                    <div class="x-icon" @click="bannerStatus = false" />
                </div>
            </div>
        </div>
    </div>

<script>
export default {
  data:() => ({
    bannerStatus: true;
  })
}
</script>

<style lang="scss" scoped>
.mobile-banner {
    display:none;
    width: 100%;
    position: fixed;
    z-index: $mobile-instructions-banner;
    background-color: $greyF;
    color: $grey0;

    &.active {
      display: block;
    }
}
.container {
    display: flex;
    justify-content: center;
}
.x-icon:before {
    content: "\2715";
}
</style>

bannerStatus 决定横幅的显示/隐藏状态，当你想再次显示时将其更改为 true

【讨论】：