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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ColourfulTiger/article/details/81369295

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

后台传来的值其实也是一种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 />

 

以上即为所有步骤。


 

展开阅读全文

没有更多推荐了,返回首页