vue.js 初步--动态订单结算列表

刚接触vue.js ，写了个动态的订单列算列表Demo

效果：

代码：

<template>  <div class="page-field">    <mt-header title="回收登记">      <router-link to="/reclaimList" slot="left">        <mt-button icon="back"></mt-button>      </router-link>    </mt-header>    <div class="page-button-group">      <mt-field label="回收清单"  readonly="readonly"></mt-field>      <div class="labelImage"  @click="show = !show">        <img src="../../../static/img/icon.png" alt="">      </div>      <transition name="bounce">        <transition name="bounce" v-if="show" >          <div id='example-3'>            <li  v-for="(item,index) in items" :key="item.name"  v-on:click="imageChange(index)">              <input type="checkbox" :style="{'checked':item.selected}" class="example" id="jack" :value="item.name"  v-on:click="changeItem(item)" >              <label for="jack" >{{item.name}}</label>              <span class="sell sell2 sellC" >单价：</span><input type="text" v-model="item.price" class="sellC2">              <span class="sell sellC" >重量(kg)</span><input type="text"  v-model="item.num" class="sellC2">              <span class="sell laberC" >￥{{item.itemPrice}}</span>            </li>            <div class="label-r">              总价￥{{totalPrice}}            </div>          </div>        </transition>      </transition>    </div>    <input type="button" class="login" id="login" value="预约" @click="order()"/>  </div></template><script>  import $ from 'jquery'  import  utils from '../../common/js/utils';  export default {    data() {      return {        show: false,        invites:{},        typeid:'',        items:[],        totalPrice:0      }    },    created() {    var url = utils.buildApiUrl( 'api/v1/renewable/invites/get', ["debug"]);    $.ajax({      url: url,      data: {inviteid:this.id},      type: "POST",      datatype: "json",      context: this,      success: function (data) {        if (data.code == '200') {          console.log(data)          this.invite = data.data        }        else {          alert(data.msg);        }      },    });      //拿到再生资源垃圾类型    var url = utils.buildApiUrl('api/v1/renewabletypes', ["debug"]);    $.ajax({      url: url,      data: {},      type: "POST",      datatype: "json",      context: this,      success: function (data) {        if (data.code == '200') {          for(let i=0;i<data.data.length;i++){          //创建item对象，代表一行记录          var item={            name:data.data[i].name,  //名称            price:'',                //单价            num:'',                  //数量            itemPrice:'',            //单价*数量            selected:false           //是否选中          }            this.items.push(item)          }        }        else {          alert(data.msg);        }      },    });    },    methods:{      changeItem:function (item) {        item.selected=!item.selected;        this.totalPrice=0;        for(var i=0;i<this.items.length;i++) {          if (this.items[i].selected) {            this.totalPrice += this.items[i].itemPrice;          }        }      }    },    watch:{      items:{        handler(){          for(var i=0;i<this.items.length;i++){            this.items[i].itemPrice=this.items[i].num*this.items[i].price;          }        },        deep:true      }    }  };</script>/** 样式省略*/