1. 程式人生 > >vue數組進行分組

vue數組進行分組

break body user pre () out pla footer can

數組進行分組使用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>

vue數組進行分組