uni-app导入本地json数据

在uniapp项目的时候,想把数据存到一个文件里
在网上找的时候发现大家都转载的一样的代码,于是就写上我的

json导入本地数据
json.js里面
let data =[
	{
		id:"14654651162162",
		title:"123"
	}
] 

module.exports = {
  data: data       //前一个data是将后一个data对象数组暴露出去的命名的名字,自己定义的
}

vue页面里面
<script>
    import getdata from '../../data/json.js'    //getdata是自己定义的名字
    export default {
        data() {
            return {
                getdata: getdata  //前一个getdata是页面调用的变量是自己定义的,后一个getdata是导入js进来命名的名字
            }
        }
    }
</script>

使用
  <view>{{getdata.data[0].id}}</view>
打印

注意,这里有三次定义变量名字

举个例子,用data1,data2,data3来区分它们

json导入本地数据
json.js里面
let data =[
	{
		id:"14654651162162",
		title:"123"
	}
] 

module.exports = {
  data1: data       //前一个data是将后一个data对象数组暴露出去的命名的名字,自己定义的
}

vue页面里面
<script>
    import data2 from '../../data/json.js'    //getdata是自己定义的名字
    export default {
        data() {
            return {
                data3: data2  //前一个getdata是页面调用的变量是自己定义的,后一个getdata是导入js进来命名的名字
            }
        }
    }
</script>

使用
  <view>{{data3.data1[0].id}}</view>
  console.log(data2.data1[0].id);  
  //return 是返回页面的变量,所以在return里用 data3:data2 然后再在页面里 data3.data1[0].id


Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐