<div id="app">
  <label for="product">Product X</label><br />
  <input type="number" v-model.number="items">
  <br />
  <p v-if="hasItems() && !moreThanFive()">
    You order has {{ items }} items
  </p>
  <p v-else-if="moreThanFive()">
    You order has {{ items }} items. <br />
    You have 20% discount.
  </p>
  <p v-else>
    No items
  </p>
</div>
var app = new Vue({
  el: "#app",
  data: {
    items: 0
  },
  methods: {
    hasItems: function () {
      return this.items > 0;
    },
    moreThanFive: function() {
      return this.items > 5;
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/vue/dist/vue.js