Vue.js 2 Web Development Projects

Banner bars

The other component we need is a vertical banner hanging up on one of the castle's towers. Its length will change depending on the amount of food or health. This time, we will create a dynamic SVG template so that we can modify the height of the banner.

1. First, create the component with two props (the color and the ratio) and the height computed property:

      Vue.component('banner-bar', {        props: ['color', 'ratio'],        computed: {          height () {            return 220 * this.ratio + 40          },        },      })

For now, we defined our templates in two different ways--we either used the HTML of our page or we set a string into the template option of our components. We will use another method of writing component templates--a special script tag in the HTML. It works ...