js基础 for双重循环【九九乘法表】

在使用 JavaScript 写九九乘法表时，可能会遇到以下问题： 1. 循环嵌套错误：九九乘法表需要两层循环嵌套，如果循环条件或循环语句写错，会导致输出不正确。 2. 控制台输出不美观：如果直接使用 console.log() ...

在Vue.js中，`v-for` 指令可以用来遍历数组或数字，并生成动态的内容。我们可以利用 `v-for` 来创建一个九九乘法表。 ### 实现步骤 1. **绑定数据**：我们首先需要定义一个范围，比如从 1 到 9。 2. **嵌套循环**：因为乘法表是二维结构，我们需要在外层和内层分别使用一次 `v-for` 指令来进行双重循环。 3. **条件渲染**：为了避免不必要的空白项显示，可以用 Vue 的模板语法结合判断逻辑控制内容展示。 以下是完整的示例代码： ```html <div id="app"> <table border="1" cellpadding="5px"> <!-- 外层for负责行 --> <tr v-for="(i, index) in rows" :key="index"> <!-- 内层for负责列 --> <td v-for="(j, subIndex) in i" :key="'cell-'+subIndex">{{ j }}x{{ index + 1 }}={{ (index+1)*j }}</td> </tr> </table> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script> new Vue({ el: '#app', data() { return { // 定义每行包含多少元素(即最大到几) maxRowSize: 9, } }, computed: { rows(){ let result = []; for(let i=1; i<=this.maxRowSize;i++){ let row = []; for(let j=1;j<=i;j++) { row.push(j); } result.push(row); }; return result; } } }); </script> ``` 上述代码展示了如何通过 Vue 和 HTML 渲染出一个标准的九九乘法表。 #### 解释关键点 - 我们在外部有一个主循环变量 `rows` ，它表示当前这一行应该有那些数参与运算； - 然后再每个单元格内部再用另一个小一点的数值集合做子级迭代操作完成所有公式计算工作； 最终效果会得到类似下面形式的结果表格： | 公式 | 结果 | |-- |--| |1*1|=|1| |...||...