In our HTML, we will add only two elements: an input box in which we will enter the desired position of our bouncy ball and the ball itself:
<div id="app"> <input type="number"> <div class="ball"></div> </div>
To properly render the ball, write this CSS rule and it will appear on the screen:
.ball { width: 3em; height: 3em; background-color: red; border-radius: 50%; position: absolute; left: 10em; }
We want to control the bar Y position. To do that, we will bind the top property of the ball:
<div id="app"> <input type="number"> <div class="ball" :style="'top: ' + height + 'em'"></div> </div>
Height will be part of our Vue instance model:
new Vue({ el: '#app', data: { height: 0 } })
Now, since we want ...
