用户投稿解题思维
const app = new Vue({ el: "#app", data() { return { num: 9 } },})九九乘法表中的数值是2~9
先在JacaScript中设置一个num:9的值
接着回到HTML
<body> <main id="app"> <ul v-for="(a, key) in num" :key="key"> <li> <h2 v-html="a"></h2> </li> </ul> </main></body>先跑一个v-for迴圈去遍历num的值
再使用v-html去宣染整个页面
（v-html和v-text的差异请阅读这篇）
这时输出的内容应该是下图的模样
<body> <main id="app"> <ul v-for="(a, key) in num" :key="key"> <li> <h2 v-html="a + 1"></h2> </li> </ul> </main></body>接着再h2上+1猜猜看数值会变成多少？
没错就是会变成下方的数值
因为索引值皆为 0 开始，当我们a+1时，索引位置会从1开始算起
这时我们再将v-for的num值给-1，因为索引位置改变，值也会跟着变动
<body> <main id="app"> <ul v-for="(a, key) in num - 1" :key="key"> <li> <h2 v-html="a + 1"></h2> </li> </ul> </main></body>输出值：
这时候就完成了第一步的操作
接着我要让每个对应的Title都能够乘上九
<main id="app"> <ul v-for="(a, key) in num - 1" :key="key"> <li> <h2 v-html="a + 1"></h2> </li> <li v-for="(b, key) in num" :key="key"> {{a + 1}} * {{b}} = {{ (a + 1) * b}} </li> </ul> </main>我在下方新增一个li标籤再Run一次v-for迴圈
做法和上面差不多，{{ a + 1 }}是要改变所引位置
最后输出的样子大功告成：
微信扫一扫打赏
支付宝扫一扫打赏
