浏览器自带的fetch函数： 
 
 
 
官方推荐的axios:
 
 mounted(){
  	this.lastCity=this.city
  	this.getHomeInfo()
  },
 methods:{
  	getHomeInfo(){
  		axios.get('/api/index.json?city='+this.city)
  		.then(this.getHomeInfoSucc)
  	},
 
methods: {
        getImg: function(){
          var that = this;   
          that.$http({      //调用接口
            method:'GET',
            url:this.getImgUrl //this指data
          }).then(function(response){ //接口返回数据
            this.imgList=response.data;            
          },function(error){
          })
        }
      }
 
 
 
 使用vue-resource代码如下：
 
   new Vue({
            el:'#app',
            data:{data:""},
            created:function(){
                var url="json.jsp";
            
                this.$http.get(url).then(function(data){
                    var json=data.body;
                    this.data=eval("(" + json +")");
                },function(response){
                    console.info(response);
                })
            }
          });
 
 使用Jquery的时候:
 
 new Vue({
            el:'#app',
            data:{data:""},
            beforeCreate:function(){
                var url="json.jsp";
                var _self=this;
                $.get(url,function(data){
                    _self.data=eval("(" + data +")");
                })
            }
          })
 
 
 
 
 
 

1.需求场景，产品详情参数为动态数据，包括标题和选项
 
2.包含两种选择放式，下拉选项picker和手动输入input
 
假如现在有8组属性，要匹配到对应下标和input回写变量
 
3.思路，data声明一个数组listindex，用于存储picker下标和input默认值，获取8组详情参数，往数组listindex添加8组数据的key和value，页面循环的时候pinker[listindex[index].attributeValue]下标就用，input默认值为listindex[index].attributeValue
 
 

1.安装vue-resource
 
 get请求：created: function() {
             this.$http.get('api/getNewsList')
                 .then((data) => {
                     console.log(data)
                 }, (err) => {
                     console.log(err)
                 })
         }
 
post请求：      created: function() {
             this.$http.post('getList', {
                     userid: '123'
                 })
                 .then((data) => {
                     console.log(data)
                 }, (err) => {
                     console.log(err)
                 })
         },
 
2.安装json-server    cnpm install json-server --save
 
在build/db-server文件中加入脚本
 
var jsonServer = require('json-server')
 
//jsonServer
 var jsonServer = new jsonServer()
 var apiServer = jsonServer.create()
 var apiRouter = jsonServer.router('db.json')
 var apiMiddlewares = jsonServer.defaults()
 
apiServer.use(apiMiddlewares)
 apiServer.use(apiRouter)
 apiServer.listen(port 1 + , () => {  //其中port+1表示端口号
     console.log('JSON Server is running')
 })
 
在根目录下编写db.json
 
{
     "news": [
         {
             "id": 1,
             "title": "曹县宣布昨日晚间登日成功",
             "date": "2016-08-12",
             "likes": 55,
             "views": 100086
     },
         {
             "id": 2,
             "title": "长江流域首次发现海豚",
             "date": "2016-08-12",
             "likes": 505,
             "views": 9800
     }
   ],
     "comments": [
         {
             "id": 1,
             "news_id": 1,
             "data": [
                 {
                     "id": 1,
                     "content": "支持党中央决定"
         },
                 {
                     "id": 2,
                     "content": "抄写党章势在必行！"
         }
       ]
     }
   ]
 }
 若想执行脚本则在package.json加入脚本
 
 "mock": "json-server db.json --port 8081"
 
最后执行 npm run mock
 
打开网页localhost:8081
 
2.在config/index.js添加代理端口
 
 
3.

老规矩：先走波流程！
 
看实现效果，更好根据大家的问题相对应的解决自己的问题。
 
 
功能介绍：
 
由动图可以看到，当我点击添加试题时，因为要添加些数据，跳转过去的界面必须是可以使用的。再当我点击编辑，携带过去的数据是不能更改的，只更改下方题干部分。
 
具体如何实现控件获得数据后不可更改呢？主要是用到判断，可以看到这里我只给input和select组件设置了不可用，但他们都是共用一个方法。
 
实现过程：
 
1.做判断，因为点击是一加载就出现的数据，所以是当获得过来的数组不等于空时执行
 
  //钩子函数，初始化页面用
  created() {
    this.carryCurrentRowCode = this.$route.query.carryCurrentRowCode;
    if (this.carryCurrentRowCode != undefined) {
      // 试题分类
      this.questionClassification = this.carryCurrentRowCode.questionClassifyId;
      // 试题类型
      this.v_type = this.carryCurrentRowCode.questionTypeId;
      // 试题难度
      this.v_difficulty = this.carryCurrentRowCode.degreeInitial;
      // 试题编号
      this.i_number = this.carryCurrentRowCode.serial;
      this.statusData();
      this.editNotavailable = true;
}
 
carryCurrentRowCode,是接收过来的数组，具体如何接收可以看另一篇博客：https://blog.csdn.net/weixin_39332529/article/details/106742146
 
因为不可为空undefined才执行判断里面的数据，里面的this点不是重点，它们都是接收过来显示到第二个界面的数据，关键看代码：this.editNotavailable = true;
 
2.在控件中使用editNotavailable
 
课程、试题分类下拉框和试题编号共用:disabled="editNotavailable"
 
<!-- 下拉框-课程分类 -->
     <el-select
        :disabled="editNotavailable"
        v-model="couponSelected "
        class="select_coures"
     </el-select>
>
<!-- 下拉框-试题类型 -->
     <el-select
        :disabled="editNotavailable"
        class="select_qutestions"
        v-model="v_type"
        @change="q_type"
>
     </el-select>
<!-- 接收试题编号 -->
<el-input
     v-model="i_number"
     :disabled="editNotavailable"
     placeholder="请输入编号"
     style="width:10%"
     class="m_left"
      >
</el-input>
 
3.定义editNotavailable的初始状态
 

      editNotavailable: false,
 
课程、试题分类下拉框和试题编号共用，点击编辑后：true不可用，false可用。正常跳转用false表示可用，if判断里因为是不可用的所以改为true不可用。
 
要是没有了解可留言