用 Vue 寫出九九乘法表｜前端蔡蔡 5/365天

今天要來小小練習如何用 Vue 寫出九九乘法

先從原生的 JavaScript 複習一次

for( i = 1; i < 10; i ++){
 for( j = 1; j < 10; j ++){
 console.log( `${i} * ${j} = ${i*j}` )
 }
}

其中的概念是利用 for 迴圈的遍歷再遍歷。

當第一個 for 迴圈的 i = 1 時，會進去第二個 for 迴圈從 j = 1, j = 2, j = 3,……遍歷到 j = 9。

因此 i = 1 會進去第二個 for 迴圈跑 9 遍，i = 2 時也會進去第二個 for 迴圈跑 9 遍，i = 3 時一樣….. 直到跑完 i = 9 在第二個 for 迴圈跑 9 遍，就完成九九乘法表。

如果用 Vue 的話，相同的概念，程式碼如下（以 Vue 2 為例）：

<!-- .html -->
<div id=”app”>
  <div v-for=”i in 9">
  <div v-for=”j in 9">
  {{i}} * {{j}} = {{i * j}}
  </div>
  </div>
</div>

js 檔如下，沒有做什麼，只是要綁定 #app 而已

//.js
var app = new Vue ({
 el: ‘#app’,

})

登愣！就印出九九乘法表啦（撒花）