iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 28
1
自我挑戰組

愛寫什麼就寫什麼,開心最重要系列 第 28

Day28-Alpine.js vs Vue.js淺談(5)

今天要來看Alpine.js和Vue.js的迴圈,
兩者也是非常非常像,
在Alpine.js中使用x-for
在Vue.js中使用v-for
我們直接看範例吧。

Alpine.js

(可參考Day7)
html

<ul>
  <template x-for="post in posts" :key="post.id">
    <li x-text="post.title"></li>
  </template>
</ul>

須注意!在使用x-for時,務必要搭配template標籤做使用

Vue.js

html

<ul>
  <li v-for="post in posts" :key="post.id">
    {{ post.title }}
  </li>
</ul>

比較兩者迴圈差異

  • Alpine.js需搭配template標籤做使用,裡面搭配x-for屬性
  • 印出文字的方法,Alpine.js用x-text列印出來;Vue.js用雙花框{{ }}包夾要列印的元素

上一篇
Day27-Alpine.js vs Vue.js淺談(4)
下一篇
Day29-Alpine.js vs Vue.js淺談(5)
系列文
愛寫什麼就寫什麼,開心最重要30

尚未有邦友留言

立即登入留言