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

Tsai Tsai
Mar 5, 2021

--

今天要來小小練習如何用 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’,

})

登愣!就印出九九乘法表啦(撒花)

--

--

Tsai Tsai
Tsai Tsai

Written by Tsai Tsai

前端蔡蔡|前端菜🐣 開啟我前端的每一天

No responses yet