<body>
  <div id="app">
    <ol>
      <li v-for="food in favorite">
        {{food}}
      </li>
      <li>{{addfood}}</li>
    </ol>
    <input v-model="addfood" type="text" placeholder="4番目にくるものは?">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13"></script>
</body>
#app{
  padding: 100px;
  border-radius: 10px;
  width: 300px;
  margin: 0 auto;
  box-shadow: 0 2px 7px rgba(0,0,0,.2);
}

input{
  width: 100%;
  padding: 10px;
}
let vm = new Vue({
  el : '#app',
  data : {
    favorite : ['🍖', '🌰', '🍎'],
    addfood : '',
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.