Vue implementiert ein einfaches Einkaufswagenbeispiel

<Vorlage>
  <div>
    <div>
      <span>Mobil: </span>
      <span>Preis</span> <input type="number" v-model.number="phonePrice">
      <span>Menge</span><input type="number" v-model.number="phoneCount">
      <span>Zwischensumme: </span><span>{{phoneTotal}} Yuan</span>
    </div>
    <div>
      <span>Computer: </span>
      <span>Preis</span> <input type="number" v-model.number="computerPrice">
      <span>Menge</span><input type="number" v-model.number="computerCount">
      <span>Zwischensumme: </span><span>{{computerTotal}} Yuan</span>
    </div>
    <div>
      <span>Versandkosten: </span><input type="number" v-model.number="freight"><span>Yuan</span><br>
      <span>Gesamt: {{total}} Yuan</span>
      <p>Rabatt: {{discounts}} Yuan</p>
      <p>Zahlbar: {{allPrice}}</p>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      phonePrice: '', // Preis eines Telefons phoneCount: '', // Anzahl der Telefone computerPrice: '', // Preis eines Computers computerCount: '', // Anzahl der Computer frequency: '', // Frachtrabatte: ''
    }
  },
  berechnet: {
    TelefonTotal() {
      gib diesen Telefonpreis * diese Telefonanzahl zurück
    },
    computerTotal() {
      gib diesen Computerpreis * diese Computeranzahl zurück
    },
    //Gesamtpreis total () {
      gib diese.Computergesamtsumme + diese.Telefongesamtsumme + diese.Freight zurück
    },
    allPrice() {
      gib this.total - this.discounts zurück
    }
  },
  betrachten:
    gesamt:
      depp: stimmt,
      handler () {
        wenn (dieses.TelefonTotal + dieses.ComputerTotal > 5000 und dieses.TelefonTotal + dieses.ComputerTotal < 8000) {
          diese.Rabatte = 100
        } sonst wenn (diese.Telefonsumme + diese.Computersumme > 8000) {
          diese.Rabatte = 200
        }
      }
    }
  }
}
</Skript>

<Stil scoped lang='less'>
</Stil>