VUE 展厅 示例代码

以下是一个简单的VUE展厅示例代码：

<template>
  <div class="exhibition">
    <div class="exhibition-menu">
      <ul>
        <li v-for="(menu, index) in menus" :key="index" @click="activeMenu=index" :class="{active: activeMenu===index}">
          {{ menu.title }}
        </li>
      </ul>
    </div>
    <div class="exhibition-content">
      <div v-for="(menu, index) in menus" :key="index" v-show="activeMenu===index">
        <h2>{{ menu.title }}</h2>
        <div v-html="menu.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeMenu: 0,
      menus: [
        {
          title: '产品展示',
          content: '<p>这里展示产品的相关信息和图片。</p>'
        },
        {
          title: '公司介绍',
          content: '<p>这里介绍公司的历史和发展情况。</p>'
        },
        {
          title: '联系我们',
          content: '<p>这里展示公司的联系方式和地图。</p>'
        }
      ]
    }
  }
}
</script>

在这个示例中，我们使用了VUE的动态绑定和条件渲染来实现展览馆的菜单和内容切换。`activeMenu`属性指定了当前激活的菜单项，`menus`属性指定了所有的菜单项和对应的内容。用户可以通过点击菜单项来切换展览馆的内容。