Vue之全选,计算属性computed,实战

- 日理万妓 2022-10-01 10:48 93阅读 0赞

**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>
    
    
    复制代码

转载于:https://juejin.im/post/5cdaa5a151882534b84ec15d