vue small book case

Small knowledge:

calculating vue cache attributes (properties to be updated when the object changes), the method is not cached, the method for calculating the attribute is higher than the efficiency
js has a let block-level scope, not block-level scope var, var is defective so
this .letters [0] = 'bb' ; // vue , this approach is not responsive; responsive recommended method: this.letters.splice (0,1, 'cc' );

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
    <ul v-if="books.length">
        <ul>
            <li v-for="(v,k) in books">
                <button @click="add(k,false)" :disabled="v.num <= 1">-</button>
                <input type="text" :value="v.num">
                <button @click="add(k,true)">+</button>

                <div>{{v.name}}</div>
                <div>{{v.price * v.num | showPrice}}</div>

                <button @ click = "rm ( k)"> removed </ Button> 
            </ Li> 
        </ UL> 
        Total total_price {{| showPrice}}
     </ UL> 

    <div V- the else > currently no Books </ div> 
</ div> 
</ body> 
<Script> 
    the let V = new new Vue ({ 
        EL: "#app" , 
        Data: { 
            Books: [ 
                { 
                    name: 'Dragon' , 
                    . price: 33 is , 
                    NUM: . 1 , 
                },
                {
                    name : '鹿鼎记',
                    price : 13,
                    num : 1,
                },        
            ]
        },
        methods : {
            add : function(k,boo){
                let obj = this.books[k];
                if(boo) {
                    obj.num+=1;
                }else{
                    obj.num-=1;
                }
                //this.books.splice(k,k+1,obj);
            },
            rm : function(k){
                this.books.splice(k,1);
            }
        },
        // 计算属性
        computed : {
            total_price : function(){
                let total = 0;
                for(let i = 0;i < this.books.length;i++ ){
                    total += (this.books[i].price * this.books[i].num);
                }
                return total;
            }
        },
        // 过滤器
        filters : {
            showPrice : function(price){
                return '$' + price.toFixed(2);
            }
        }
    })
</script>
</html>

Guess you like