gpt4 book ai didi

javascript - 如何在使用 VueJS(在移动设备上)单击 X 时关闭横幅

转载 作者:行者123 更新时间:2023-12-04 01:03:25 26 4
gpt4 key购买 nike

我是 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>

最佳答案

您可以使用 datav-ifv-on:click 来实现这一点
1. 数据
在 data 选项中创建一个 bool 变量并将其值设置为 true。

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

2. v-if
添加 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" />

关于javascript - 如何在使用 VueJS(在移动设备上)单击 X 时关闭横幅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67352252/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com