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用双花框{{ }}包夹要列印的元素