computed-repeat.html 802 B

123456789101112131415161718192021222324252627282930313233
  1. <form id="form">
  2. <p v-repeat="items">
  3. <input type="text" name="text{{$index}}" v-model="text">
  4. </p>
  5. <button v-on="click: add" id="add">Add</button>
  6. <p id="texts">{{texts}}</p>
  7. </form>
  8. <script src="../../../dist/vue.js"></script>
  9. <script>
  10. var app = new Vue({
  11. el: '#form',
  12. data: {
  13. items: [
  14. { text: "a" },
  15. { text: "b" }
  16. ]
  17. },
  18. methods: {
  19. add: function(e) {
  20. this.items.push({ text: "c" })
  21. e.preventDefault()
  22. }
  23. },
  24. computed: {
  25. texts: function () {
  26. return this.items.map(function(item) {
  27. return item.text
  28. }).join(",")
  29. }
  30. }
  31. })
  32. </script>