CSS + JS 实现消息的点击展示和隐藏(H5 端)

在 H5 端,我们经常需要实现类似于点击按钮来展示或隐藏消息的功能。以下是一个使用 CSS 和 JavaScript(配合 Vue.js)来实现这个效果的简单示例。

Vue 组件

创建一个名为 ToggleMessage.vue 的组件:

vue 复制代码
<template>
  <div class="toggle-container">
    <button @click="toggleMessage">点击展示/隐藏消息</button>
    <div v-if="showMessage" class="message-box">
      这是一条消息。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: false,
    };
  },
  methods: {
    toggleMessage() {
      this.showMessage = !this.showMessage;
    },
  },
};
</script>

<style scoped>
.toggle-container {
  margin: 20px;
}

.message-box {
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

功能解释

  1. 数据和状态 : 我们使用一个名为 showMessage 的数据属性来控制消息框的显示或隐藏。

  2. 切换消息显示 : 我们定义了一个 toggleMessage 方法,当用户点击按钮时,该方法会被触发,并改变 showMessage 的值。

  3. 消息框 : 我们使用了 Vue 的条件渲染(v-if 指令)来根据 showMessage 的值来展示或隐藏消息框。

  4. 样式: 我们使用简单的 CSS 来设置按钮和消息框的样式。

这个组件实现了一个简单的消息展示和隐藏功能,适用于移动端 H5 页面。你可以根据需要进行更多的定制和扩展。希望这个简单的示例能帮助你实现你需要的功能!

相关推荐
y先森5 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员8 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐8 小时前
前端图像处理(一)
前端