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 页面。你可以根据需要进行更多的定制和扩展。希望这个简单的示例能帮助你实现你需要的功能!

相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘4 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie6 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿6 小时前
webWorker基本用法
前端·javascript·vue.js