Vueはシンプルなショッピングカートの例を実装します

<テンプレート>
  <div>
    <div>
      <span>モバイル: </span>
      <span>価格</span> <input type="number" v-model.number="phonePrice">
      <span> 数量</span><input type="number" v-model.number="phoneCount">
      <span>小計: </span><span>{{phoneTotal}} 元</span>
    </div>
    <div>
      <span>コンピューター: </span>
      <span>価格</span> <input type="number" v-model.number="computerPrice">
      <span> 数量</span><input type="number" v-model.number="computerCount">
      <span>小計: </span><span>{{computerTotal}} 元</span>
    </div>
    <div>
      <span>送料: </span><input type="number" v-model.number="freight"><span>元</span><br>
      <span>合計: {{total}} 元</span>
      <p>割引: {{discounts}} 元</p>
      <p>支払額: {{allPrice}}</p>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      phonePrice: '', // 電話機の価格 phoneCount: '', // 電話機の台数 computerPrice: '', // コンピュータの価格 computerCount: '', // コンピュータの台数 frequency: '', // 運賃割引: ''
    }
  },
  計算: {
    電話合計() {
      this.phonePrice * this.phoneCount を返します
    },
    コンピュータ合計() {
      this.computerPrice * this.computerCount を返します
    },
    //合計価格 total() {
      this.computerTotal + this.phoneTotal + this.freight を返します
    },
    すべての価格() {
      this.total - this.discounts を返す
    }
  },
  時計：
    合計：
      デップ：本当だ、
      ハンドラ（）{
        (this.phoneTotal + this.computerTotal > 5000 && this.phoneTotal + this.computerTotal < 8000) の場合 {
          this.discounts = 100
        } そうでない場合 (this.phoneTotal + this.computerTotal > 8000) {
          this.discounts = 200
        }
      }
    }
  }
}
</スクリプト>

<スタイル スコープ lang='less'>
</スタイル>