如何在文本框vue.js上根据指定的数字添加行

How to add rows base on the specified number on textbox vue.js

本文关键字：添加行 数字 文本 js vue      更新时间：2023-12-14

大家好，我是使用vue.js制作应用程序的新手我想知道如何根据文本框中指定的数字添加行。

这是我的小提琴

https://jsfiddle.net/7nxhygLp/2/

脚本

    var evaluate  = new Vue({
  el: "#evaluate",
  data: {
    rows: [
    ]
  },
  methods:{
    addRow: function(){
      this.rows.push({});
    },
    removeRow: function(row){
      //console.log(row);
      this.rows.$remove(row);
    }
  }
});

您可以使用v-model来检索输入框的值，然后只推送那么多新行：

HTML

<input type="text" v-model="rowCount" name="rows" class="rows-textbox">

JS

data: {
    rowCount:0,
    rows: [
    ]
  },
  methods:{
    addRow: function(){
      for(i = 0; i < this.rowCount; i++){
        this.rows.push({});
      }
      this.rowCount = 0;
    },
  }

Fiddle

相关文章：