Vue之全選,計算屬性computed,實戰

json本地數據

[
    {
        "id":1,
        "isSelected":false,
        "imgUrl": "https://i8.mifile.cn/b2c-mimall-media/e9dbcaac03907010f67723914f3da1a4!344x280.jpg",
        "title": "12.5\"筆記本Air 128GB",
        "price": 10.15646,
        "count":8
    },
    {
        "id":2,
        "isSelected":false,
        "imgUrl": "https://i8.mifile.cn/b2c-mimall-media/cf11ac38e1c8b1caeefa672ef908d94c!696x436.jpg",
        "title": "13.3\"筆記本Air",
        "price": 20.568989,
        "count":8
    },

    {
        "id":3,
        "isSelected":true,
        "imgUrl": "https://i8.mifile.cn/b2c-mimall-media/0252f42ac06556b92b2854d5511d3f36!120x120.jpg",
        "title": "米兔智能積木",
        "price": 30.2566,
        "count":8
      }
]

複製代碼

app.vue

<template>
  <div id="app">
      <div class="container">
        <table class="table table-hover">
  <thead>
    <tr>
      
      <th scope="col">ID</th>
      <th scope="col">全選<input type="checkbox" v-model="all" ></th>
      <th scope="col">title</th>
      <th scope="col">圖片</th>
      <th scope="col">單價</th>
      <th scope="col">數量</th>
      <th scope="col">小計</th>
      <th scope="col">操做</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in arr" :key="index" >
      <th scope="row">{{item.id}}</th>
    <td><input type="checkbox" v-model=item.isSelected ></td>
      <td>{{item.title}}</td>
      <td><img class="timg" :src="item.imgUrl" alt=""></td>
       <td>{{item.price|doFixed(2)}}</td>
       <th scope="col"><input type="number" v-model="item.count"></th>
      <td>{{item.count*item.price|doFixed(2)}}</td>
      <td><button class="btn btn-danger" @click="del(index)">刪除</button></td>
    </tr>
  </tbody>
</table>
<p> 總價格:{{sum()|doFixed(2)}}</p>
      </div>

      <input type="text" v-model="x">+<input type="text" v-model="y">=<input type="text" v-model="z">
  </div>
</template>
<script>
// import axios from 'axios';
export default {
  data() {
    return {
        arr:[],
        x:10,
        y:3
    }
  },
  computed: {
    z:{
      get(){
        return Number(this.x)+Number(this.y);
      }
    },
    all:{
      get(){
        return this.arr.every(item=>item.isSelected);//every方法,只要有一個錯,那就是錯,必須每個對,才能返回對.
      },
      set(val){
        this.arr.forEach((item)=>{
          item.isSelected=val;//點擊全選按鈕   遍歷數組 把每個item變成全選的v-model值
        })
      }
    }
  },
  filters:{

  },
  created() {
    // var that=this;
    this.axios.get('carts.json').then((res)=>{
    this.arr=res.data;
    // console.log(res.data);
  })
  .catch( (error) =>{
    console.log(error);
  });
  },
  methods: {
      del(index){
        console.log(index);
        
          this.arr.splice(index,1);
      },
     
      sum(){
        let total=0;
        this.arr.forEach((item)=>{
            total+=item.isSelected ? item.price*item.count:0;
        })
        return total;

      }
  },
}
</script>
<style>
.timg{
  width: 200px;
  height: 100px;
}
</style>


複製代碼