Day27-Alpine.js vs Vue.js淺談(4)

第 12 屆 iThome 鐵人賽

DAY 27

自我挑戰組

12th鐵人賽

970 瀏覽

今天要來介紹Alpine.js和Vue.js的雙向資料綁定，
這是非常實用的東西呢，
它可以使輸入的值與組件保持同步。

(在Day5也有做介紹喔!)
html

<div x-data="{ title: '' }">
  <h3 x-text="title"></h3>

  <input type="text" x-model="title" />
</div>

html

<template>
  <div>
    <h3>{{ title }}</h3>

    <input type="text" v-model="title">
  </div>
</template>

export default {
  name: 'App',
  data() {
    return {
      title: ''
    }
  }
}

兩者極為類似，
最終還是差在是否有虛擬DOM的存在而使編寫方式不同而已。

系列文

愛寫什麼就寫什麼，開心最重要共 30 篇

5 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

立即登入留言