数组进行分组使用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数组进行分组的更多相关文章

  1. [one day one question] Vue数组变更不能触发刷新

    问题描述:Vue数组变更不能触发刷新,特别是数组的每个元素都是对象的时候,对象中某个属性的值发生变化,根本无法触发Vue的dom刷新,这怎么破? 解决方案:this.$set(array, index ...

  2. vue 数组渲染问题

    vue 数组渲染问题 问题一: 用v-for循环渲染数组数据时,数据更新了,视图却没有更新 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 当你利用索引直接设置一个项时, ...

  3. vue数组变异方法

    Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...

  4. Vue数组更新及过滤排序

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...

  5. vue 数组 新增元素 响应式原理 7种方法

    1.问题 思考一个问题,以下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. vue 数组更新 this.$set(this.dataList, data.index, data.data)

    vue 数组更新 this.$set(this.dataList, data.index, data.data) https://www.cnblogs.com/huangenai/p/9836811 ...

  7. vue 数组和对象渲染问题

    vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...

  8. vue 数组对接字符串 传值时候,join(',') 一下 watch

    vue 数组对接字符串 传值时候,join(',') 一下 watch watch: { 'tFill.otherDescArr': function (newVal, oldVal) { this. ...

  9. vue数组更新界面无变化

    1. vue数组更新界面无变化 1.1. 说明 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相 ...

随机推荐

  1. 常用脚本--生成指定表的INSERT 语句

    --================================================= --摘抄自http://www.cnblogs.com/sunth/archive/2013/0 ...

  2. 用pillow和 opencv做透明通道的两图混全(blend)

    from PIL import Image as image foreground = image.open("donkey.png") background = image.op ...

  3. web api 请求结果中页面显示的json字符串与json对象结果不一致

    我在前端调用这个api的时候也是百思不得其解,明明看到页面上的结果ID是不一样的,但是在js中使用的时候,却一直有重复ID的情况 后来才发现原来是long这个类型的原因,JavaScript中Numb ...

  4. Django_Restframwork_序列号组件

     第一种序列化方式. 第二种方法通过Model_to_dict方法进行创建 第三种方式序列号组件Serializers: 第四种方法序列化 五.ModelSerializer组件. POST校验 PU ...

  5. 开源NFV管理器 - OpenStack Tacker介绍 NFV和Tacker介绍和主要功能

    原文链接:https://blog.csdn.net/bc_vnetwork/article/details/51463518 1.NFV概述 NFV(网络功能虚拟化Network Function ...

  6. Maven 项目中使用mybatis-generator生成代码

    在使用Maven构建SSM项目时,使用mybatis-generator插件自动生成代码 一.目录结构 bean:用来存放生成的实体类 dao:用来存放生成的 *mapper.java文件 mappe ...

  7. HTTP请求报文支持的各种方法

    常见的HTTP方法如下: 1.GET GET是最常用的方法.通常用于请求服务器发送某个资源. 2.HEAD HEAD与GET的行为类似,但服务器在响应中只返回首部,不会返回实体的部分.这就允许客户端在 ...

  8. 通过Jenkins进行提权的一个思路

    作者:欧根亲王号   所属团队:Arctic Shell Jenkins是一款由Java编写的开源的持续集成工具,其本身具有执行脚本的功能 在Jenkins的说明信息中列出我们可以使用任意Groovy ...

  9. AngularJS源码解析2:注入器的详解

    上一课,没有讲createInjector方法,只是讲了它的主要作用,这一课,详细来讲一下这个方法.此方法,最终返回的注册器实例对象有以下几个方法: invoke, instantiate, get, ...

  10. [Swift实际操作]七、常见概念-(14)使用UIColor设置界面组件的颜色属性

    打开移动应用程序,不可避免的需要和颜色打交道.本文将为你演示颜色对象的使用. 首先导入需要使用到的界面工具框架 import UIKit 通过UIColor的属性,可以获得橙色.右侧的实时反馈区,显示 ...