vue渲染自定义json数据
<template>
<div class="wrap">
<div class="main">
<div class="main_left">
<ul v-for="(val,index) in list[0].type" @click="clc(index)">
<li>{{val.tit}}</li>
</ul>
</div>
<div class="main_right">
<ul v-for="(val,index) in list[0].type[this.indexs].datainfo">
<li>
<img :src="val.img" />
<span>{{val.name}}</span>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import axios from "axios"
export default {
name: "tab1",
data() {
return {
indexs: "0",
list: [{
"type": [{
"tit": "常用",
"datainfo": [{
"img": "../../static/img/美食.png",
"name": "美食",
"datatype": "大众点评"
},
{
"img": "../../static/img/星巴克.png",
"name": "酒店",
"datatype": "房价-预定"
},
{
"img": "../../static/img/公交.png",
"name": "银行",
"datatype": ""
},
{
"img": "../../static/img/医院.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/银行.png",
"name": "公交地铁",
"datatype": ""
},
{
"img": "../../static/img/电影院.png",
"name": "团购",
"datatype": ""
},
{
"img": "../../static/img/超市.png",
"name": "超市",
"datatype": ""
},
{
"img": "../../static/img/加油站.png",
"name": "加油站",
"datatype": "折扣油价"
},
{
"img": "../../static/img/星巴克.png",
"name": "电影院",
"datatype": "影讯-预定"
},
{
"img": "../../static/img/星巴克 (1).png",
"name": "星巴克",
"datatype": ""
},
{
"img": "../../static/img/汉堡可乐.png",
"name": "麦肯比",
"datatype": ""
},
{
"img": "../../static/img/ktv (1).png",
"name": "KTV",
"datatype": ""
},
{
"img": "../../static/img/啤酒.png",
"name": "酒吧",
"datatype": ""
},
{
"img": "../../static/img/洗浴用具.png",
"name": "洗浴",
"datatype": ""
},
{
"img": "../../static/img/商场.png",
"name": "商场",
"datatype": ""
},
{
"img": "../../static/img/医院 (2).png",
"name": "医院",
"datatype": "大众点评"
},
{
"img": "../../static/img/卫生间 .png",
"name": "公厕",
"datatype": ""
}
]
},
{
"tit": "特色",
"datainfo": [{
"img": "../../static/img/酒店.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/美食.png",
"name": "酒店",
"datatype": "房价-预定"
},
{
"img": "../../static/img/银行.png",
"name": "银行",
"datatype": ""
},
{
"img": "../../static/img/洗浴用具.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/公交 (1).png",
"name": "公交地铁",
"datatype": ""
},
{
"img": "../../static/img/团购.png",
"name": "团购",
"datatype": ""
},
{
"img": "../../static/img/超市 (1).png",
"name": "超市",
"datatype": ""
},
{
"img": "../../static/img/加油站 (1).png",
"name": "加油站",
"datatype": "折扣油价"
},
{
"img": "../../static/img/电影院 (1).png",
"name": "电影院",
"datatype": "影讯-预定"
},
{
"img": "../../static/img/星巴克 (1).png",
"name": "星巴克",
"datatype": ""
},
{
"img": "../../static/img/汉堡可乐.png",
"name": "麦肯比",
"datatype": ""
},
{
"img": "../../static/img/ktv (1).png",
"name": "KTV",
"datatype": ""
}
]
},
{
"tit": "餐饮",
"datainfo": [{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/酒店.png",
"name": "酒店",
"datatype": "房价-预定"
},
{
"img": "../../static/img/银行.png",
"name": "银行",
"datatype": ""
},
{
"img": "../../static/img/洗浴用具.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/公交 (1).png",
"name": "公交地铁",
"datatype": ""
},
{
"img": "../../static/img/团购.png",
"name": "团购",
"datatype": ""
},
{
"img": "../../static/img/超市 (1).png",
"name": "超市",
"datatype": ""
}
]
},
{
"tit": "购物",
"datainfo": [{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/酒店.png",
"name": "酒店",
"datatype": "房价-预定"
},
{
"img": "../../static/img/银行.png",
"name": "银行",
"datatype": ""
},
{
"img": "../../static/img/洗浴用具.png",
"name": "ATM",
"datatype": ""
}
]
},
{
"tit": "休闲",
"datainfo": [{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/酒店.png",
"name": "酒店",
"datatype": "房价-预定"
},
{
"img": "../../static/img/银行.png",
"name": "银行",
"datatype": ""
},
{
"img": "../../static/img/洗浴用具.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/酒店.png",
"name": "酒店",
"datatype": "房价-预定"
},
{
"img": "../../static/img/银行.png",
"name": "银行",
"datatype": ""
},
{
"img": "../../static/img/洗浴用具.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/酒店.png",
"name": "酒店",
"datatype": "房价-预定"
},
{
"img": "../../static/img/银行.png",
"name": "银行",
"datatype": ""
},
{
"img": "../../static/img/洗浴用具.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/洗浴用具.png",
"name": "ATM",
"datatype": ""
}
]
},
{
"tit": "交通",
"datainfo": [{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/酒店.png",
"name": "酒店",
"datatype": "房价-预定"
},
{
"img": "../../static/img/银行.png",
"name": "银行",
"datatype": ""
},
{
"img": "../../static/img/洗浴用具.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
}
]
},
{
"tit": "便民",
"datainfo": [{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/酒店.png",
"name": "酒店",
"datatype": "房价-预定"
},
{
"img": "../../static/img/银行.png",
"name": "银行",
"datatype": ""
},
{
"img": "../../static/img/洗浴用具.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/酒店.png",
"name": "酒店",
"datatype": "房价-预定"
},
{
"img": "../../static/img/银行.png",
"name": "银行",
"datatype": ""
},
{
"img": "../../static/img/洗浴用具.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/酒店.png",
"name": "酒店",
"datatype": "房价-预定"
},
{
"img": "../../static/img/银行.png",
"name": "银行",
"datatype": ""
},
{
"img": "../../static/img/洗浴用具.png",
"name": "ATM",
"datatype": ""
},
{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
}
]
}, {
"tit": "酒店",
"datainfo": [{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/酒店.png",
"name": "酒店",
"datatype": "房价-预定"
}
]
},
{
"tit": "资讯",
"datainfo": [{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/酒店.png",
"name": "酒店",
"datatype": "房价-预定"
},
{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/酒店.png",
"name": "酒店",
"datatype": "房价-预定"
},
{
"img": "../../static/img/美食.png",
"name": "周边微博",
"datatype": "大众点评"
},
{
"img": "../../static/img/酒店.png",
"name": "酒店",
"datatype": "房价-预定"
}
]
}
]
}
]
}
},
methods: {
clc(index) {
this.indexs = index
}
}
}
</script>
<style type="text/css">
.main_left {
width: 30%;
height: 100vh;
float: left;
overflow: auto;
}
.main_left ul li {
width: 100%;
height: 1rem;
text-align: center;
line-height: 1rem;
font-size: 18px;
border-bottom: 1px solid #ccc;
}
.main_left ul li:hover {
background: #efefef;
}
.main_right {
width: 70%;
height: 100vh;
float: left;
overflow: auto;
}
.main_right ul li {
width: 100%;
height: 1rem;
line-height: 1rem;
font-size: 18px;
background: #efefef;
}
.main_right ul li img {
width: 1rem;
float: left;
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
vue渲染自定义json数据的更多相关文章
- Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据
准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0 ...
- Asp.Net Core 轻松学-实现跨平台的自定义Json数据包
前言 在前后端分离的业务开发中,我们总是需要返回各种各样的数据包格式,一个良好的 json 格式数据包是我们一贯奉行的原则,下面就利用 Json.Net 来做一个简单具有跨平台的序列化数据包实 ...
- vue中引入json数据，不用本地请求
1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...
- vue格式化显示json数据
已经是json格式数据的,直接用标签 <pre></pre>展示. 参考:https://www.jianshu.com/p/d98f58267e40
- vue请求本地json数据
1.下载vue-resource插件 cnpm install vue-resource 1.2全局引入vue-resource: 在main.js import VueResource from ' ...
- vue 渲染后更新数据
this.$set(this.selGetData,level,[{},{}])this.$set(this.selGetData,1,{message:"Test add attr&quo ...
- Vue之循环遍历Json数据，填充Table表格
简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...
- 将相关数据拼成所需JSON数据
参考: http://www.cnblogs.com/shuilangyizu/p/6019561.html 有时候我们需要将一些数据拼装成所需要格式的JSON,可以使用如下方法,本人觉得还是比较方便 ...
- vue服务端渲染axios预取数据
首先是要参考vue服务端渲染教程:https://ssr.vuejs.org/zh/data.html. 本文主要代码均参考教程得来.基本原理如下,拷贝的原文教程. 为了解决这个问题,获取的数据需要位 ...
随机推荐
- CodeMirror教程，CodeMirrorAPI中文信息
<html> <head> <link rel="stylesheet" href="codemirror.css"> ...
- Oracle VM virtualBox -Centos6.4 安装后没有网解决方法
1.先修改Oracle VM virtualBox 的网络配置 2.然后启动centos输入: dhclient eth0 3.然后如果没报错的话 输入: ifconfig 就可以查看到ip地址 ...
- C#发送电子邮件 (异步) z
///验证电子邮件的正则表达式 string emailStr = @"^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([ ...
- 笨办法学Python（四十一）
习题 41: 来自 Percal 25 号行星的哥顿人(Gothons) 你在上一节中发现 dict 的秘密功能了吗?你可以解释给自己吗?让我来给你解释一下,顺便和你自己的理解对比看有什么不同.这里是 ...
- Python3基本数据类型（三、列表）
序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字-它的位置,或索引,第一个索引是0,第二个索引是1,以此类推.Python有6个序列的内置类型,但最常见的是列表和元组.序列都可以进 ...
- 百度地图JavaScript开发入门先知
最近项目紧急开发了一些百度地图的功能,觉得百度地图实数强大!于是今天不忙总结一下,看到不错的文章先转载. 文章出处:https://www.opengps.cn/Blog/View.aspx?id=1 ...
- IOS 获取更多的设备信息
● 如果想获得更多的设备信息,比如 ● 设备型号.CPU情况.内存使用情况.硬盘使用情况 ● 是否越狱.装了哪些传感器.当前运行的进程 ● ... ... ● 有2种方法获取更多的设备信息 ...
- 【LOJ6042】「雅礼集训 2017 Day7」跳蚤王国的宰相（思博题）
点此看题面 大致题意: 给你一棵树,询问对于每个点需要改变多少条边来使得它成为树中到所有点距离和最小的点. 一些初始化及想法 这是一道思博题. 首先我们要知道一个结论:对于这棵树的重心,它的答案必定为 ...
- spring boot 三种入参
先来讲述下最简单的使用get请求用户信息的实现方式,代码如下,写好后直接在Application类点击右键有个RunAs,点击后会自动运行,运行成功后可以使用http发包工具进行测试,这里推荐使用ch ...
- About me and this site(2018/8/28)
Name: 李秋豪 / [lǐ qiū háo] I'm a junior majoring in InfoSec at Harbin Institute of Technology. I'm int ...