vue 使用模拟的json数据查看效果

最新推荐文章于 2024-10-06 18:10:12 发布

ColourfulTiger

最新推荐文章于 2024-10-06 18:10:12 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue json数据引用

本文链接：https://blog.youkuaiyun.com/ColourfulTiger/article/details/81369295

vue 专栏收录该内容

29 篇文章

订阅专栏

在没有后台配合的情况下，前端开发者可以使用模拟的JSON数据进行效果预览。本文介绍了如何创建一个包含模拟数据的JSON文件，并在Vue项目中引用它。通过在`created()`生命周期钩子中获取并应用数据，可以在页面上展示这些模拟数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在数据交互这一块，很多时候是要和后台进行沟通配合的，作为初学者或者纯前端的学习者，我们不可能经常有后台配合自己来展示，那么怎样才能模拟类似的效果呢？

后台传来的值其实也是一种json格式的数据，我们只需要模拟json形式的内容即可。

具体方法如下：

1）封装一个json的文件，里面存放需要的数据，在webpack环境下放置在common文件夹中。

数据如下：

{
	"name":"张三",
	"age":20,
	"phone":"12345678",
	"sex":"女",
	"grades":[
	  {
	  	"语文":100,
	  	"数学":98,
	  	"英语":100,
	  	"计算机":95,
	  	"物理":88,
	  	"电路":89
	  }
	]
}

2）在指定的vue文件中引用这个data.json的数据

本例是order.vue

3）在order.vue中设置对应的值

export default{
        name: 'Order',
        data(){
            return{
                name:"",
                age:0,
                phone:"",
                sex:"",
                grades:[],
                avg:0
            }
        },

4）使用数据进行模拟，封装在 created() 中，获取需要的数据

created() {
			this.name = data.name;
			this.age = data.age;
			this.phone = data.phone;
			this.sex = data.sex;
	    	this.grades = data.grades;
			
		},

5）界面调用

            <label>name:</label><span>{{name}}</span><br />
            <label>age:</label><span>{{age}}</span><br />
            <label>phone:</label><span>{{phone}}</span><br />
            <label>sex:</label><span>{{sex}}</span><br />

以上即为所有步骤。