查找用户给定的单个元素的立方体。 (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 来设置 table 的样式）

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>

查找用户给定的单个元素的立方体。 (Vue.js)

Find cube of individual element given by user. (Vue js)

loops

vue.js

vuejs2

cube