表單綁定

我們可以同時使用 v-bind 和 v-on 來在表單的輸入元素上創建雙向綁定：

<input :value="text" @input="onInput">

function onInput(e) {
  // v-on 處理函數會接收原生 DOM 事件
  // 作為其參數。
  text.value = e.target.value
}

為了簡化雙向綁定，Vue 提供了一個 v-model 指令

<input v-model="text">

• v-model 會將被綁定的值與 的值自動同步，這樣我們就不必再使用事件處理函數了。
• v-model 不僅支持文本輸入框，也支持諸如多選框、單選框、下拉框之類的輸入類型。

實作

使用v-bind、v-on

<script setup>
import { ref } from 'vue'

const text = ref('')

function onInput(e) {
  text.value = e.target.value
}
</script>

<template>
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>

使用v-model

<script setup>
import { ref } from 'vue'

const text = ref('')

</script>

<template>
  <input v-model="text">
  <p>{{ text }}</p>
</template>

條件渲染

我們可以使用 v-if 指令來有條件地渲染元素：

<h1 v-if="awesome">Vue is awesome!</h1>

這個 h1標籤只會在 awesome 的值為真值 (Truthy) 時渲染。若 awesome 更改為假值 (Falsy)，它將被從 DOM 中移除。

我們也可以使用 v-else 和 v-else-if 來表示其他的條件分支：

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

實作

示例程序同時展示了兩個 h1 標籤，並且按鈕不執行任何操作。嘗試給它們添加 v-if 和 v-else 指令，並實現 toggle() 方法，讓我們可以使用按鈕在它們之間切換。

<script setup>
import { ref } from 'vue'

const awesome = ref(true)

function toggle() {
  // ...
}
</script>

<template>
  <button @click="toggle">Toggle</button>
  <h1>Vue is awesome!</h1>
  <h1>Oh no 😢</h1>
</template>

完成

<script setup>
import { ref } from 'vue'

const awesome = ref(true)

function toggle() {
  awesome.value = !awesome.value
}
</script>

<template>
  <button @click="toggle">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>