上一篇我們提到「單向綁定」，了解到了他是作為「單向」的。本篇我們來講雙向吧！

什麼是雙向綁定？

一樣意思，假設今天我們有一個很厲害的機器，上面有個按鈕，可以讓該地方下雨或是放晴。那我可以在農夫種完田之後下雨，幫他灌溉。然後再農夫需要陽光的時候幫他放晴一下，吸收光合作用。而這才機器，就是「雙向」，不僅天氣可以影響人，而人也可以影響天氣。

所以讀者也可以將「雙向綁定」理解為，資料和畫面會互相影響。當變數更改時，畫面會重新渲染，而當使用者在畫面操作時，數據也會跟著重新計算。

Vue 的雙向綁定：v-model

在 Vue 裡，最常見的雙向綁定就是 v-model。
來看一個最基本的範例：

<template>
  <input v-model="text" placeholder="請輸入文字" />
  <p>你輸入的文字是：{{ text }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const text = ref('')
</script>

我們定義了一個變數 text，當然 <p> 會是空的。
但是當使用者在 input 輸入值後，text也會跟著變更，同時同步到 <p>上。

單向 vs 雙向

我們來做個對比：

• 單向綁定：就像公告欄，老師在上面寫字，同學只能看，無法去改內容。
• 雙向綁定：然後老師叫同學上去作答，學生改變了黑板的字，同時顯示給同學看。

小小練習：做一個「即時暱稱顯示器」

題目：做一個輸入框，讓使用者輸入自己的暱稱，並且即時顯示在畫面上。

Thinking~

1. 建立一個變數 nickname，初始值為空字串。
2. 在 <input> 上使用 v-model="nickname"。
3. 在 <p> 顯示 {{ nickname }}。

解答

<template>
  <div>
    <h1>暱稱設定</h1>
    <input v-model="nickname" placeholder="輸入你的暱稱..." />
    <p>哈囉，{{ nickname || '訪客' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const nickname = ref('')
</script>

<style>
h1 {
  color: #42b883;
}
input {
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
p {
  margin-top: 10px;
  font-size: 18px;
}
</style>

同樣，style不看，我們宣告了一個變數叫做 nickname，前端目前會顯示哈摟，。
如果使用者在 input 輸入名字，則名字就會綁訂到 nickname，同時同步到 <p> 上。

本文結尾

今天我們學到了「雙向綁定」，它就是讓程式和畫面資料互相影響，大幅減少了開發者需要「手動更新資料」的麻煩。到這裡，我們已經把單向和雙向綁定都學完了。下一篇，我們要來講一講「事件綁定」。當資料會變動的時候，我們往往需要讓使用者可以觸發某些事件，例如按鈕點擊。