数组进行分组使用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. 自我介绍及如何注册GITHUB

    自我介绍 我是来自南通大学网络工程141班的周楠,我的学号是1413042014,我的兴趣是喜欢玩游戏(如果这算是一个兴趣爱好的话),喜欢尝试各种游戏. 如何注册一个GitHub账号? 1.首先我们需 ...

  2. ServiceStack.Text json中序列化日期格式问题的解决

    标记: ServiceStack.Text,json,序列化,日期 在使用ServiceStack.Text的序列化为json格式的时候,当属性为datetime的时候,返回的是一个new date( ...

  3. vue实现首页导航切换不同路由的方式(二)【使用vuex实现的】

    <nav> <!-- 导航栏 --> <div class="indexNavOut"> <div class="indexNa ...

  4. django drf 级联数据和RetrieveModelMixin

    1.定义View from django.shortcuts import render from rest_framework.views import APIView from rest_fram ...

  5. Volo.Abp.EntityFrameworkCore.MySQL 使用

    创建新项目 打开 https://cn.abp.io/Templates ,任意选择一个项目类型,然后创建项目,我这里创建了一个Web Api 解压项目,还原Nuget,项目目录如下: 首先我们来查看 ...

  6. LightOJ 1213 Fantasy of a Summation(规律 + 快数幂)

    http://lightoj.com/volume_showproblem.php?problem=1213  Fantasy of a Summation Time Limit:2000MS     ...

  7. Java实现对ftp的读写文件

    这里仅仅是对ftp工具类的简单使用,很多东西还不是很了解.当然学以致用,先用到这里吧. public class FtpTest { /** * 向ftp写文件(数据) */ @Test public ...

  8. Eclipse导出JAR过程

    Eclipse是一款免费的JAVA开发环境,被各个软件公司使用,可以说是目前使用最多的JAVA开发工具了,网址:http://www.eclipse.org 下面演示如何建立JAVA工程和导出JAR: ...

  9. guzzle 简单使用记录

    用 guzzle 发送一个包含指定请求头,请求体的 post 请求,并获取指定内容: <?php include_once "guzzle.phar"; use Guzzle ...

  10. centos绑定https

    1.百度云申请免费ssl证书 一年一申请 2. https://www.wosign .com /faq/faq-apache-https.htm 3.注意ssl.conf里面各个证书的顺序 证书路径 ...