vue数组进行分组

数组进行分组使用switch方法 

<template>
  <v-layout>
    <v-card contextual-style="dark" v-if="show">
      <span slot="header">
        一级主页面
      </span>
      <div slot="body">主内容页
        <!-- <div v-for="item in listTittle" :key="item.id">{{item}}</div>         -->
        <!-- <div v-for="item in list" :key="item.id">
            <p>{{listTittle}}{{item.name }}</p>
          </div> -->
        <div>
          <ul>
            <li>需求：{{lists.demand}}</li>
            <li>用户：{{lists.user}}</li>
            <li>时间：{{lists.time}}</li>
          </ul>
        </div>
      </div>
      <div slot="footer" :showDate="showDate">
        <div>来自主页面</div>
        <button type="button" class="btn btn-info " @click="toggle1">去子组件并传递数据</button>
      </div>

    </v-card>
    <v-card contextual-style="dark" v-else>
      <span slot="header">
        组件主页
      </span>
      <div slot="body">组件内容页</div>
      <div slot="footer">
        <div>来自组件页面</div>
        <my-button showDate="***父组件传递的数据***" @toggleEvent="toggle"></my-button>
      </div>

    </v-card>

  </v-layout>
</template>

<script>
/* ============
 * Home Index Page
 * ============
 *
 * The home index page.
 */

import VLayout from '@/layouts/Default';
import VCard from '@/components/Card';
import MyButton from '@/components/MyButton';

export default {
  /**
   * The name of the page.
   */
  name: 'home-index',
  data() {
    return {
      show: true,
      showDate: "父子间传过来的数据",
      lists: {
        demand: [],
        user: [],
        time: []
      },
      list: [{ id: 1, name: '需求1', code: 'admin.demand' },
      { id: 2, name: '需求2', code: 'admin.demand' },
      { id: 3, name: '用户1', code: 'admin.user' },
      { id: 4, name: '用户2', code: 'admin.user' },
      { id: 5, name: '时间1', code: 'admin.time' },
      { id: 6, name: '时间2', code: 'admin.time' },
      { id: 7, name: '用户3', code: 'admin.user' },]
    }
  },
  methods: {
    toggle1() {
      this.show = false;
    },
    toggle(data) {
      console.log(data)
      this.show = data;
    },
    listinfo() {

      this.list.map((x) => {
        console.log(x.code.split(".")[1])
        switch (x.code.split(".")[1]) {
          case "demand":
            this.lists.demand.push(x.name);
            // 执行代码块 1
            break;
          case "user":
            // 执行代码块 2
            this.lists.user.push(x.name);
            break;
          case "time":
            // 执行代码块 3
            this.lists.time.push(x.name);
            break;
          default:

        }
      })
    }
  },
  mounted() {
    // this.toggle();
    this.listinfo();
  },
  /**
   * The components that the page can use.
   */
  components: {
    VLayout,
    VCard,
    MyButton
  },
};
</script>

 

转载于:https://www.cnblogs.com/xkloveme/p/7536072.html