vue使用json最简单的两种方式

第一种:

首先我项目是在 webpack 下搭建的vue项目
在public文件夹下创建jsonTest.json
json 格式的数据如下:
{
    “innerList”: [
        {"attr1":"内部数据1","attr2":"内部数据2",...},
        {"attr1":"内部数据1","attr2":"内部数据2",...},
        ....
    ]
}
在某一组件内:

......html元素
import people from '../../json/jsonTest.json';

export default{
    data(){
        return {
            dataset: people.innerList
        }
    }
}

第二种:

getDataList(){
 this.$axios.get("/json/jsonTest.json").then((res)=>{
 //得到response.data数据做具体赋值操作
 }).catch(() => {
        response.errer
                    this.$message({
                        message: response.errer.msg
                    })
                })
 

原文地址:https://www.cnblogs.com/demiao/p/12248315.html

时间: 2024-10-03 23:02:27

vue使用json最简单的两种方式的相关文章

vue项目中导出PDF的两种方式

参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器自身的方法.window.print() 来打印(打印时可选下载),这种方式打印出来很清楚,但纯在浏览器兼容问题. 谷歌浏览器比较好用点. 两种导出pdf清晰度对比: --------------左边 html2canvas + jspdf:-----------------------------

vue 路由传参 params 与 query两种方式的区别

初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了:  router文件下index.js里面,是这么定义路由的: { path:"/detail", name:"detail", component:home } 我想用params来传参,是这么写的,嗯~ this.$router.push({ path:"/detail", params:{ name:'nameV

Android解析XML文档的两种方式的简单对比

Android之所以会用到解析XML文档,不仅与JAVA对XML的解析比较简单,而且还因为XML是Android在网络间传递信息的主要存储方式.下面我简单谈谈Android对XML文档解析的两种方式:dom和sax.dom解析方式是,解析方法将一个XML文件看成是一棵树.由数据结构的知识我们知道对树的处理比较简单,就是对树的节点进行增,删,改,查,这也是dom的一个最大优点.但是,dom方式在解析的时候是一次性就将整个XML文档读进内存,这坏处不用我说了吧,我宝贵的内存是禁不起这么折腾的. sa

向服务器传json数据的两种方式

接触到了向服务器传JSON数据,那么怎么把参数以JSON的形式,传到服务器呢.下面来说说,json字符串的得到方法.一共有两种方式来得到Json的字符串.当然,向服务器上传,不能传字符串,是要转成NSData的,也就是二进制的形式.这个在此不讨论,只说,怎么得到json的字符串. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. //第一种方法,是把要传的参数

【代码笔记】向服务器传JSON数据的两种方式

一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. //第一种方法,是把要传的参数组合成一个数组,然后由JSONKit把字典转为字符串 NSDictionary* jsonDic = [NSDictionary dictionaryWithObjectsAndKeys:@"李华",@"name",@"女&quo

C和C#两种方式实现邮件的简单接收

本文的主要内容是通过两种方式实现简单邮件的接收,一种方式是通过C语言实现,另一种是通过C#实现的, 两种方式在实现上有许多的不同之处,但是本质上都是一样的. 一,C语言实现方式 C语言接收邮件的步骤: 1.创建TCP连接   端口:默认110 2.连接到Pop3服务器 服务器名称:例如"pop3.163.com" 3.认证登录      用户账号,密码 4.发送请求,接收服务端信息   send(...)  返回"+OK" a.获取邮箱中邮件的数量    "

选中没有选中的复选框,匹配含有某个字符串的正则,json取值的两种方法,把变量定义在外面跟里面的区别

一.筛选没有选中的复选框:not("input:checked") 二.匹配有VARCHAR的字符串:".*VARCHAR.*?" 三.json取值的两种方法 var data={ "show_in_list": 1, "enums": [ { "value": "B2B", "key": "1" }, { "value": &

Json转list,两种包,两种方式

1.使用fastjson 对于json串大小写没什么要求,测试的时候,我把javaBean属性设置成和json串一样的大小写,代码如下: package com.myTest.json.test1; import java.util.ArrayList; import java.util.List; import com.alibaba.fastjson.JSON; public class app1 { public static void main(String[] args) { Stri

最简单的两种快排----掌握思想和过程

俗话说:天下武功,无坚不破.对于算法当然也是要使用时间最快.占用空间最小的算法来实现了.下面就是最简单的两种快排(其实可以算是一种). 注意:我代码里面打的备注仅供参考,建议不要背模板(因为没有固定的模板),可以写一个数列按着代码跑两圈或者把代码改一下输出每次排序后的结果. 总之,师傅领进门,修行在个人.奋斗把!骚年! ※冒泡排序.选择排序: 1 #include "cstdio" 2 #include "iostream" 3 using namespace st