Vue3留言墙项目——主体部分静态、mock

主体头部

主体部分显示的内容，根据头部点击的是留言墙还是照片墙的按钮，显示不同的内容。

将照片墙和留言墙要渲染的数据抽取到一个js中，在导入的Main.vue（主体页面）中渲染。

将页面中的文字记录在src/utils/data.js中

// 墙的性质
// 这样记录后wallType[0]为留言墙内容 wallType[1]为照片墙内容
export const wallType = [
  {
   
    name: "留言墙",
    slogan: "很多事情值得记录，当然也值得回味。",
  },
  {
   
    name: "照片墙",
    slogan: "很多事情值得记录，当然也值得回味。",
  },
];

// 分类标签
// label[0]为留言墙内容 label[1]为照片墙内容
export const label = [
  [
    "留言",
    "目标",
    "理想",
    "过去",
    "将来",
    "爱情",
    "亲情",
    "秘密",
    "信条",
    "无题",
  ],
  [
    "我",
    "ta",
    "喜欢的",
    "有意义的",
    "值得纪念的",
    "母校",
    "生活",
    "天空",
    "我在的城市",
    "大海",
  ],
];

根据id渲染照片墙或留言墙& 点击标签样式切换 实现这两个功能的Main.vue代码为：

<template>
  <div class="main">
    <div class="message">
      <p class="name">{
  { wallType[id].name }}</p>
      <p class="slogan">{
  { wallType[id].slogan }}</p>
    </div>

    <div class="labels">
      <ul>
        <li :class="{ liselected: liIndex == -1 }" @click="changeIndex(-1)">
          全部
        </li>
        <li
          v-for="(item, index) in label[id]"
          :key="index"
          @click="changeIndex(index)"
          :class="{ liselected: liIndex == index }"
        >
          {
  { item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
      wallType, label } from "@/utils/data";
import {
      ref } from "vue";
export default {
     
  setup() {
     
    let id = ref(0); // 留言墙id为0 之后做事件使得id为1
    let liIndex = ref(-1); // 当前选中状态小li的下标
    const changeIndex = (index) => {
     
      liIndex.value = index;
    };
    return {
     
      wallType,
      label,
      id,
      liIndex,
      changeIndex,
    };
  },
};
</script>

<style lang="scss" scoped>
.main {
     
  margin-top: 52px;
  .message {
     
    padding-top: 46px;
    .name {
     
      font-size: 56px;
      color: $gray-1;
      font-weight: 600;
    }
    .slogan {
     
      font-size: 14px;
      color: $gray-3;
      padding-bottom: 44px;
    }
  }

  .labels