如何在html/css/javascript中更快地编写多个文本框？

<div id="container"></div>

<script>
  var container = document.getElementById("container");
  for (var i = 0; i < 5; i++) {
    var input = document.createElement("input");
    input.type = "text";
    container.appendChild(input);
  }
</script>

<div id="container"></div>

<script id="template" type="text/x-handlebars-template">
  {{#each inputs}}
    <input type="text">
  {{/each}}
</script>

<script>
  var container = document.getElementById("container");
  var template = document.getElementById("template").innerHTML;
  var inputs = [{}, {}, {}, {}, {}]; // 输入文本框的数量
  container.innerHTML = Handlebars.compile(template)({ inputs: inputs });
</script>

<div id="container"></div>

<script>
  Vue.component("text-input", {
    template: '<input type="text">'
  });

  new Vue({
    el: "#container",
    data: {
      count: 5 // 输入文本框的数量
    },
    template: '<div><text-input v-for="i in count" :key="i"></text-input></div>'
  });
</script>