查找用户给定的单个元素的多维数据集。 （Vue js）

Question

我希望用户输入一个数字，然后它将找到它的多维数据集。另外，我还必须显示输出的每个单独元素的多维数据集。

例如用户输入3。第一个输出应该是27然后我要分别显示2和7的多维数据集。

这是我想出的...https://jsfiddle.net/ods0621f/

<div id="app">
  <input v-model='mainNumber' placeholder='Enter a number.'>
  <button v-on:click="cube">Submit</button>
  <p>
    Cube of the number is: {{ mainNumber }} <br>
  </p>
  <p v-for="index in methods">
  {{ index }}
  </p>
</div>

new Vue({
  el: "#app",
  data: {
    mainNumber: ''
  },
  methods: {
    cube: function(event){
    var allowedInput = /^[0-9]/;
    if (this.mainNumber.match(allowedInput)){
    this.mainNumber = this.mainNumber*this.mainNumber*this.mainNumber;
    var splitNumber = (""+this.mainNumber).split("");
    console.log(splitNumber[1]);

    }
    else
    {
    alert('Only digits are allowed.');
    }
    }
    }
})

Answer 1

您很亲密，尽管我们需要抽象一些功能，例如立方体算法，并了解数字和字符串：

let calc = this.cubeInt(this.mainNumber);
let strToNum = calc.toString().split('').map(Number);

全力以赴，cubeInt只是对数字求立方。strToNum：将Number类型转换为String类型，将每个字符拆分为一个数组，然后使用map函数转换为Number，它将第一个参数作为String并将其转换为Number。

（（我添加了一些模板CSS来设置表格样式）

new Vue({
  el: "#app",
  data: {
    mainNumber: null,
    result: null
  },
  methods: {
    cubeInt: function(int) {
     return int*int*int
    },
  	cube: function(event){
      var allowedInput = /^[0-9]/;
      if (this.mainNumber.match(allowedInput)){
        let calc = this.cubeInt(this.mainNumber);
        let strToNum = calc.toString().split('').map(Number);
        this.result = strToNum
      } else {
    		alert('Only digits are allowed.');
    	}
    },
    }
})

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 50%;
  text-align: center;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model='mainNumber' placeholder='Enter a number.'>
  <button v-on:click="cube">Submit</button>
  <p>
    Cube of the number is: {{ this.result }} <br>
  </p>
 <table id="customers">
 <tr v-for="row in 2" :key="item">
   <td v-for="item in result" v-text="row > 1 ? cubeInt(item) : item"></td>
 </tr>
 </table>
</div>