今天用vue实现一个简单的九九乘法表
首先引入vue文件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
创建vue实例
<script>
var app = new Vue({//创建vue实例
el: '#app',//element为id是app的节点
data: {//储存数据
num: 9,//我们要的是九九乘法表,所以就是9,也可以是其他的值。
},
})
</script>
然后渲染到页面中
<div id="app">
<table><!--创建一个表格-->
<tr v-for="i in num"><!-- 第几行就取几,最多取到num,也就是我设置的9. -->
<td style="width:100px;" v-for="j in i"><!-- 第几列就取几,最多取到和当前行数一样。然后所有的等式挤在一块儿不好看,为单元格设置宽度,好看点。-->
{{j}}*{{i}}={{j*i}}
</td><!-- 每一个单元格内,用当前单元格所在列数乘以行数即可。-->
</tr>
</table>
</div>
这样就完成了一个九九乘法表,实现效果如下: