在 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>功能解释
- 
数据和状态 : 我们使用一个名为 showMessage的数据属性来控制消息框的显示或隐藏。
- 
切换消息显示 : 我们定义了一个 toggleMessage方法,当用户点击按钮时,该方法会被触发,并改变showMessage的值。
- 
消息框 : 我们使用了 Vue 的条件渲染( v-if指令)来根据showMessage的值来展示或隐藏消息框。
- 
样式: 我们使用简单的 CSS 来设置按钮和消息框的样式。 
这个组件实现了一个简单的消息展示和隐藏功能,适用于移动端 H5 页面。你可以根据需要进行更多的定制和扩展。希望这个简单的示例能帮助你实现你需要的功能!