Vue基础练习-watch属性，computed属性，filters过滤器

//样式
<style>
        .title{
            background-color: #eee;
            font-size: 18px
        }
        .div-td{ width:800px} 
        .div-td table td {
            height: 40px;
            background: #CCC;
            color: #000;
            line-height: 40px;
            text-align: center;
        }
        input[type=text]{
            width: 50px;
        }
        .bottom{
            width: 800px;
            display: flex;
            justify-content: space-between;
            color: red;
            font-weight: bold;
        }
        .bottom button{
            width: 80px;
            height: 30px;
            margin-top: 20px;
            font-weight: bold
        }
    </style>

//页面
 <div id="app">
        <div class="div-td">
            <table width="100%" border="0" cellspacing="1" cellpadding="0">
                <tr class="title">
                    <th>
                        <input type="checkbox" v-model="allChecked">
                        全选
                    </th>
                    <th>名称</th>
                    <th>图片</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in goodses" :key='item.id'>
                    <td>
                        <input type="checkbox" v-model="item.check" value="">
                    </td>
                    <td>
                        {{item.name}}
                    </td>
                    <td>
                        <img :src="item.imgurl" alt="">
                    </td>
                    <td>
                        {{item.price | toFix2}}元
                    </td>
                    <td>
                        <!-- 给btn绑定，当num=1时，禁用 -->
                        <button @click="item.num--" :disabled="item.num===1">-</button>
                        <input type="text" v-model="item.num" readonly>
                        <button @click="item.num++" :disabled="item.num===9999">+</button>
                    </td>
                    <td>
                        {{item.num*item.price |toFix2}}元
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="bottom">
            <p>总价：{{sum |toFix2}}元</p>
            <button>结算</button>
        </div>
    </div>

<script src="./JS/vue (1).js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                goodses: [{
                    id: 1001,
                    name: "iphone13",
                    price: 5999,
                    num: 1,
                    iTotal: 0,
                    check: false,
                    imgurl: 'https://img10.360buyimg.com/n7/jfs/t1/146683/21/21823/167120/61a0cc38E974b9bd9/3100637fdbc85328.jpg'
                },
                {
                    id: 1002,
                    name: "华为mate40",
                    price: 6289,
                    num: 1,
                    iTotal: 0,
                    check: false,
                    imgurl: 'https://img10.360buyimg.com/n7/jfs/t1/179598/36/6697/144323/60b47feaEf44a5eed/b88c0485ca234e0d.jpg'
                },
                {
                    id: 1003,
                    name: "小米m40",
                    price: 5999,
                    num: 1,
                    iTotal: 0,
                    check: false,
                    imgurl: 'https://img14.360buyimg.com/n7/jfs/t1/202084/19/1836/114475/611bb50dEc333e180/41226ce8eaaa35da.jpg'
                }
                ],
                allChecked: false,
                isOk: [],
            },
            methods: {
                del(index) {
                    let r = confirm("确定删除商品吗?")
                    if (r) {
                        this.goodses.splice(index, 1)
                    }
                }
            },

            computed: {
                sum() {
                    let summ = 0
                    let res = this.goodses.filter(r => r.check === true)
                    res.forEach(s => {
                        summ += s.price * s.num
                    });
                    return summ
                }
            },
            watch: {
                allChecked: {
                    immediate: true, 
                    handler(newValue) {
                        this.goodses.forEach(r => r.check = newValue)
                    }
                },
                goodses:{
                    immediate: true, 
                    deep:true,
                    handler(newValue) {
                      let k=  this.goodses.every(r => r.check===true)
                      console.log(k);
                      if(k){
                          this.allChecked=true
                      }else{
                        this.allChecked=false
                      }
                    }
                }

            },
            filters:{
                toFix2(val){
                    return val.toFixed(2)
                }
            }

        })
    </script>