用v-for遍历九九乘法表倒序
时间: 2024-10-10 17:14:00 浏览: 33
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
在Vue.js中,如果你想用`v-for`遍历九九乘法表并按照倒序显示,你可以这样做:
```html
<template>
<div id="multiplicationTable">
<table>
<tr v-for="(row, index) in reversedMultiplication(9)">
<td v-for="(element, innerIndex) in row" :key="`${index}-${innerIndex}`">{{ element }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
reversedMultiplication(n) {
let result = [];
for (let i = n; i >= 1; i--) {
let newRow = [];
for (let j = n; j >= 1; j--) {
newRow.push(i * j);
}
result.unshift(newRow);
}
return result;
},
},
};
</script>
```
在这个例子中,我们创建了一个名为`reversedMultiplication`的方法,它会生成一个倒序的九九乘法表数组。然后在模板中,我们分别使用两个嵌套的`v-for`循环遍历每一行和每个元素,并通过`:key`属性设置唯一标识。
阅读全文