VUE小さなブックケース

小さな知識：

VUEキャッシュ属性を計算することは、メソッドがキャッシュされていない（オブジェクトの変更をするときの特性を更新するために）、属性を計算するための方法は、効率よりも高く
なく、ブロックレベルのスコープvarは、varはそれほど不良LETブロックレベルの範囲でいるJS
この.letters [0] = 'BB' ; // VUE 、このアプローチは応答しない。応答推奨される方法：this.letters.splice（0,1、 'CC' ）。

 

 

                ボタン@ "（真k）の追加"をクリックする=> + </ button>の<div>の{{v.name}} </ div> 
                <div>の{{v.price * v.num | showPrice}} </ div>


                <クリック= "RM（@ボタン K）"> 削除</ボタン> 
            </ LI> 
        </ UL> 
        総TOTAL_PRICE {{| showPrice}}
     </ UL> 

    <divのV- 他 >現在ありませんブックス</ DIV> 
</ DIV> 
</ BODY> 
<SCRIPT> 
    のlet V = 新しい新しいヴュー（{ 
        EL： "#app" 、
        データ：{ 
            ブック：[ 
                { 
                    名： 'ドラゴン' 、
                    価格： 33は、
                    NUM： 1 、
                }、
                {
                    名称： '鹿鼎记' 、
                    価格： 13 、
                    NUM： 1 、
                }         
            ] 
        }、
        方法は：{ 
            追加：関数（K、BOO）は{ 
                OBJせ = この.books [K]。
                もし（BOO）{ 
                    obj.num + = 1 ; 
                } 他{ 
                    obj.num - = 1 ; 
                } 
                // this.books.splice（K、K + 1、OBJ）。
            }、
            RM：関数（K）{
                 この .books.splice（K、1 ）; 
            } 
        } 
        // 计算属性
        計算：{ 
            TOTAL_PRICE：関数（）{ 
                せ合計 = 0 ;
                用（; I <I = 0せ、この .books.length; Iを++ ）{ 
                    合計 + =（この .books [I] .price * この.books [I] .nu​​m）。
                } 
                戻り総。
            } 
        }、
        //过滤器
        フィルター：{ 
            showPrice：機能（価格）{
                 リターン '$' + price.toFixed（2 ）; 
            } 
        } 
    }）
 </ SCRIPT> 
</ HTML>