1.axios读取本地数据

1.本地数据

// data/carts.json
[
    {
        "isSelected": true,
        "productCover": "https://img3.doubanio.com/view/subject/m/public/s33510542.jpg",
        "productName": "纸上行舟",
        "productInfo": "青年作者黎幺短篇小说首度结集",
        "productPrice": 57.33,
        "productCount": 3,
        "id": "0001"
    },
    {
        "isSelected": true,
        "productCover": "https://img3.doubanio.com/view/subject/m/public/s33497735.jpg",
        "productName": "我可能得抑郁症了！舟",
        "productInfo": "青年作者黎幺短篇小说首度结集",
        "productPrice": 54.26,
        "productCount": 2,
        "id": "0002"
    },
    {
        "isSelected": true,
        "productCover": "https://img3.doubanio.com/view/subject/m/public/s33474961.jpg",
        "productName": "绕日飞行",
        "productInfo": "驯马、飞行、成长、爱情",
        "productPrice": 22.67,
        "productCount": 3,
        "id": "0003"
    }
]

2.使用axios获取本地数据

  var vm=new Vue({
    el:"#app",
      data:{
        products:[],
    },
    mounted() {
      axios.get('./data/carts.json').then(res=>{
        return this.products=res.data;
      })
      this.handleItem()   //进入这个函数时就执行一下handleItem()
    },
})

3.使用数据

 <table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>全选 <input type="checkbox" v-model="checkAll" @change="change"></th>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
     </tr>
  </thead>
  <tbody>
        <tr v-for="item of products">
        <td> <input type="checkbox" v-model="item.isSelected" @change="handleItem"></td>
        <td class="name"><img class="img" :src="item.productCover" alt=""></img>{{item.productName}}</td>
      <td>{{item.productPrice}}</td>
      <td><input type="number" class="number" min="1" v-model.number="item.productCount"></td>
      <td>{{item.productPrice*item.productCount | format(2)}}</td>
      <td><button class="delete btn-danger">删除</button></td>
      </tr>
  </tbody>
</table>