Vue

by 朱 茱霞

HTML

<div class="container" id="app">

  <table class="table" v-if="dataList.length">
    <thead>
      <tr>
        <th>产品编号</th>
        <th>产品名称</th>
        <th>购买数量</th>
        <th>产品单价</th>
        <th>产品总价</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in dataList" :key='item.id'>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>
          <input @click="update(item,'sub')" type="button" value="-" class="btn btn-danger">
          <!-- 不使用$watch -->
          <input type="text" size="4" :value="item.quanity" @input="inputFn(item,$event)">
          <input @click="update(item,'add')" type="button" value="+" class="btn btn-danger">
        </td>
        <td>￥{{ item.price }}</td>
        <td>￥{{ item.price * item.quanity }}</td>
        <td>
          <input type="button" value="移除" class="btn btn-danger" @click="update(item,'del')">
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td></td>
        <td>总数：{{ getQty }}</td>
        <td></td>
        <td>总价格：￥{{ getTotalPirce }}</td>
        <td>
          <input type="button" value="清空购物车" class="btn btn-danger" @click="update('','delAll')">
        </td>
      </tr>
    </tfoot>
  </table>
  <div v-if="!dataList.length">
    请选购您所需的商品
  </div>
</div>

JavaScript

// 可 F12 调用console 面板查看数据变化
var app = new Vue({
    el:'#app',
    data:{
        dataList:[
            {
                id:1001,
                name:'iphone5',
                quanity:4,
                price:4999
            },
            {
                id:1002,
                name:'iphone5s',
                quanity:6,
                price:5999
            },
            {
                id:1003,
                name:'iphone6',
                quanity:3,
                price:4999
            },
            {
                id:1004,
                name:'iphone6s',
                quanity:7,
                price:7999
            },
        ]
    },
    computed:{
        getQty(){
            var total = 0
            this.dataList.forEach(element => {
                total+= parseInt( element.quanity )
            });
            return total; 
        },
        getTotalPirce(){
            var totalPriece = 0
            this.dataList.forEach(element => {
                totalPriece += parseInt( element.quanity ) * parseInt( element.price )
            });
            return totalPriece; 
        }
    },
    methods:{
        update(item,todo){
            if( todo == 'add' ){
                if(item.quanity >= 10 ){
                    alert('只能在1到10')
                    return;
                }
                item.quanity++
            } else if( todo == 'sub'){
                if( item.quanity > 1 ){              
                    item.quanity--
                } else {
                    if( confirm('是否删除此物品')){
                        this.dataList.splice(this.dataList.indexOf(item),1)
                    }
                }
            } else if( todo == 'del'){
                if( confirm('是否删除此物品？')){
                    this.dataList.splice(this.dataList.indexOf(item),1)
                }
            } else if( todo == 'delAll'){
                if( confirm('是否清空购物车？')){
                   ...