効果の簡単なリストを達成するために計算Vueの量（簡単なショッピングカート）

レンダリング：

 

 

---

 

 

技術を使用します。v-用のVバインドV-上の選択された結合操作の簡単なリストを達成するために

 

コード：

<！DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        < メタのcharset = "UTF-8"  /> 
        < タイトル> </ タイトル> 
        < スクリプトSRC = "JS / vue.js" タイプ= "テキスト/ javascriptの" 文字セット= "UTF- 8" > </ スクリプト> 
        < スタイル> 
            .green { 
                背景：greenyellow 。
                国境半径：5pxの;
            
{ 
                背景：deeppink 。
                国境半径：5pxの; 
            } 

            #box { 
                ボーダー半径：5pxの。
                フォントファミリ：黑体。
                幅：300ピクセル; 
                高さ：400ピクセル; 
                背景：cadetblue 。
            } 

            .item { 
                テキスト整列：センター。
                幅：240ピクセル; 
                高さ：40ピクセル; 
                マージントップ：10pxの; 
                行の高さ：40ピクセル; 
            } 
        </ スタイル> 
    </ ヘッド> 
    < ボディ> 
        < DIV ID = "ボックス" 整列= "中心" > 
            < H1 スタイル= "パディングトップ：20ピクセルと、" >サービス</ H1 > 
            < divのクラス=」V-のために"カート内（アイテム、インデックス）" = V・オン：クリック= "OK（インデックス）" V-バインド：クラス= "{ピンク：！item.bol、緑：item.bol}" > 
                < P > {{item.name}} ------ {{item.price}} - {{item.bol}} </ P > 
            </ DIV > 
            < 時間> 
            < P スタイル= "フロート：左;余白左：は50px;」>合計：</ P > 
            < P スタイル= "フロート：右;マージン右：は50px;" > {{合計}} </ P > 
        <
    > 
</ HTML > 

< スクリプト> 
    のvar VM =  新しいヴュー（{ 
        エル：' #box ' 、
        データ：{ 
            カート：[{ 
                    名：' コンピュータ' 、
                    価格：5000 、
                    ボル：偽
                }、
                { 
                    名：' Keybord ' 、
                    価格：200 、
                    ボル：偽
                }、
                { 
                    名：' マウス' 、
                    価格：20 、
                    ボル：偽
                }、
                { 
                    名：' ディスク' 、
                    価格：2000 、
                    ボル：偽
                } 
            ]、
            合計：0 
        }、
        メソッド：{ 
            OK：関数（指数）{
                この.cart [インデックス] .bol =  ！この.cart [インデックス] .bol
                 この.total =  0 
                のための（VAR I =  0 ; I <  本.cart.length; iは++ ）{
                     場合（この.cart [i]は.bol）
                         この.totalは+ =  この.cart [I] .price 
                } 
            } 
        } 
    }）
</ スクリプト>