时间戳

首页 > 解决方案 > 通过在 Vue 中输入数字来立即更改表格的列和行

vue.js - 通过在 Vue 中输入数字来立即更改表格的列和行

问题描述

添加并输入按钮后，我通过按下按钮实现了更改表格，但是我想一输入数字就立即更改表格的列和行。例如，如果我输入 4，我想要一个 4X4 的表。我不知道。帮我。

<html>
<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    div { padding: 30px; margin: 30px auto; width: 600px;
      border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
    table { border-collapse: collapse; margin-top: 10px; }
    td { width: 50px; height: 50px; border: 1px solid gray; font-size: 20pt;
      text-align: center; cursor: pointer; }
    .yellow { background-color: yellow; }
  </style>
</head>
<body>
  <div id="app">
    <input type="text" v-model.number="size" >
    <button type="button" @click="change(size)">Change</button>
    <table :style="{backgroundColor: color}">
      <tr v-for="(row, index1) in matrix" v-bind:key="index1">
        <td v-for="(value, index2) in row" v-bind:key="index2">
          {{ value }}
        </td>
      </tr>
    </table>
    <h1>{{size}}</h1>
  </div>

  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        size: 3,
        matrix: [],
        clicked: [],
        color: "",
    },
      created() {
        for (let r = 0; r < this.size; ++r) {
          this.matrix[r] = [];
          for (let c = 0; c < this.size; ++c)
            this.matrix[r][c] = r * this.size + c +1; 
        }
      },
      methods:{
        change(s){
          this.size=s
          console.log(this.size)
          let arr=[]
          for (let r = 0; r < this.size; ++r) {
              arr[r] = [];
            for (let c = 0; c < this.size; ++c)
              arr[r][c] = r * this.size + c +1; 
          }
          this.matrix=arr
        }
      }
    })
   </script>
</body>
</html>

标签： vue.js

解决方案

你可以在你的尺寸状态上使用观察者

watch 语句应该是这样的：

watch: {
  size(newVal){
      this.change(newVal)
  }
}

您可以在下面看到一个工作示例:)

var app = new Vue({
      el: '#app',
      data: {
        size: 3,
        matrix: [],
        clicked: [],
        color: "",
    },
      created() {
        this.change(this.size)
      },
      methods:{
        change(s){
          console.log(this.size)
          let arr=[]
          for (let r = 0; r < this.size; ++r) {
              arr[r] = [];
            for (let c = 0; c < this.size; ++c)
              arr[r][c] = r * this.size + c +1; 
          }
          this.matrix=arr
        }
      },
      watch: {
        size(newVal){
            this.change(newVal)
        }
      }
    })
 div { padding: 30px; margin: 30px auto; width: 600px;
      border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
    table { border-collapse: collapse; margin-top: 10px; }
    td { width: 50px; height: 50px; border: 1px solid gray; font-size: 20pt;
      text-align: center; cursor: pointer; }
    .yellow { background-color: yellow; }
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
  <div id="app">
    <input type="text" v-model.number="size" >
    <table :style="{backgroundColor: color}">
      <tr v-for="(row, index1) in matrix" v-bind:key="index1">
        <td v-for="(value, index2) in row" v-bind:key="index2">
          {{ value }}
        </td>
      </tr>
    </table>
    <h1>{{size}}</h1>
  </div>

</body>
</html>

推荐阅读