vue十三

<div id="app13">
        希望翻译成为:
        <br>
        <select v-model="obj.lang">
            <option value="english">英语</option>
        </select>
        <br>
        请输入:<label style="margin-left: 50px;">翻译为:</label>
        <br>
        <textarea v-model="obj.words" style="height: 60px;width: 80px;resize: none;flex-direction: row;"></textarea>
        <textarea style="height: 60px;width: 80px;resize: none;flex-direction: row;margin-left: 20px;">{{ result }}</textarea>

    </div>
    <script>
        const app13=new Vue({
            el:'#app13',
            data:{
                obj:{
                    words:'',
                    lang:'english'
                },
                result:'',
                timer:null
            },
            methods:{},
            watch:{
                'obj':{
                    deep:true,
                    handler (newValue){
                        //console.log(newValue)
                        
                        clearTimeout(this.timer)
                        this.timer =  setTimeout( async () => { 
                            res = await axios({
                            url:'https://applet-base-api-t.itheima.net/api/translate',
                            params:newValue
                            })
                            this.result=res.data.data
                            console.log(res.data.data)
                        },300)
                    }
                }   
            }
        })
    </script>
    <div id="fruit">
        <table border="1" cellspacing="0" style="width: 60%;height: 40%;margin: auto;">
            <tr style="background-color: antiquewhite">
                <td style="width: 16%;">选中</td>
                <td style="width: 20%;">图片</td>
                <td style="width: 16%;">单价</td>
                <td style="width: 16%;">数量</td>
                <td style="width: 16%;">总价</td>
                <td style="width: 16%;">操作</td>
            </tr>
            <!-- 购物车内有东西 -->
            <tr v-for="(item , index) in List" :key="item.id" :class="{ biege:item.ischeck }">
                <td class="one_fruit">
                    <input type="checkbox" v-model="item.ischeck">
                </td>
                <td class="one_fruit">
                    <img :src="item.icon">
                </td>
                <td class="one_fruit">
                    {{ item.price }}
                </td>
                <td class="one_fruit">              
                    <span>
                        <button @click="reduce(item.id)" style="width: 20px;"
                            :disabled="item.num === 0">-</button>
                        {{ item.num }}
                        <button @click="add(item.id)" style="width: 20px;"
                        >+</button>
                    </span>                    
                </td>
                <td class="one_fruit">
                    {{ item.all_price }}
                </td>
                <td class="one_fruit">
                    <button @click="del(item.id)" style="width: 40px;">删除</button>
                </td>
            </tr>
            <!-- 购物车内无东西 -->
            <tr style="height: 130px;" v-if="List.length === 1 ">
                <td colspan="6" >购物车内暂无商品</td>
            </tr>
            <tr>
                <td style="font-size: 12px;">
                    <input type="checkbox" v-model="checkall" style="vertical-align: middle;">全选</td>
                <td colspan="4">已选择{{ count_num }}件商品,共<span style="color: chocolate;font-size: 26px;">{{ count_dollar }}</span>元</td>
                <td>
                    <button style="background-color: cornflowerblue;margin: 6px 0 6px 0;width: 40px;height: 25px;
                        font-size: 10px;color:white;" :disabled="checknum === 0" @click="buy">结算({{ checknum }})</button>
                </td>
            </tr>
        </table>
    </div>
    <script>
        const defaultArr=[
                    {
                        id:1,
                        ischeck:false,
                        icon:'https://ts1.cn.mm.bing.net/th/id/R-C.ad5f084f52c38d9d7894987c14107dd1?rik=W3aZOJT4210EXg&riu=http%3a%2f%2fimg11.360buyimg.com%2fn0%2fg14%2fM0A%2f01%2f00%2frBEhV1NfRCoIAAAAAAWNXkkAqXEAAMxcgLzb5oABY12230.jpg&ehk=s75SFG3w%2bfrUIkJwXfvP6Rp%2bT52RrsQizkB54pgiJpI%3d&risl=&pid=ImgRaw&r=0',
                        price:10,
                        num:1,
                        all_price:10
                    },
                    {
                        id:2,
                        ischeck:false,
                        icon:'https://img.zcool.cn/community/01cc5a5b0671d6a801218cf491ef80.png@1280w_1l_2o_100sh.png',
                        price:30,
                        num:1,
                        all_price:30
                    }
                ]
        const fruit=new Vue({
            el:'#fruit',
            data:{
                List:JSON.parse(localStorage.getItem('list')) || defaultArr
            },
            methods:{
                add(id) {
                    this.List[id-1].num++
                    this.List[id-1].all_price = this.List[id-1].num * this.List[id-1].price
                },
                reduce(id) {
                    this.List[id-1].num--
                    this.List[id-1].all_price = this.List[id-1].num * this.List[id-1].price
                },
                del(id){
                    this.List=this.List.filter(item =>  item.id != id )
                },
                buy(){
                    alert('13312184191')
                }
            },
            computed:{
                count_num(){
                    let num=0
                    for(let i=0;i<this.List.length;i++){
                        if(this.List[i].ischeck){
                            num++
                        }
                    }
                    return num
                },
                count_dollar(){
                    let num=0
                    for(let i=0;i<this.List.length;i++){
                        if(this.List[i].ischeck){
                            num=num+this.List[i].all_price
                        }
                    }
                    return num
                },
                'checkall':{
                    get(){
                        return this.List.every(item => item.ischeck)
                    },
                    set(value){
                        this.List.forEach(element => {
                            element.ischeck = value
                        });
                    }
                },
                checknum:{
                    get(){
                        let temp=0
                        this.List.forEach(item => {
                            if(item.ischeck){
                                temp++
                            }
                        })
                        return temp
                    },
                    set(vakue){}
                }
            },
            watch:{
                List:{
                    deep:true,
                    handler(newValue){
                        localStorage.setItem('list',JSON.stringify(newValue))
                    }
                }
            }
        })
    </script>