Day2 - Vue.js 的基礎魔法：v-model

2025 Vue 直播班每日任務，藉由一天學一點積沙成塔

Topic

操作提供的模版，執行以下要求（只能修改 HTML 的部分）：

1. 請將 class 名稱為 Q1 的 input 標籤，利用 v-model 進行綁定。
2. 請將 class 名稱為 Q2 的 input 標籤，利用 v-model 的修飾符進行轉換為 number 型別。

<template>
  <div id="app">
    <div class="Q1">
      <input type="text" />
    </div>
    <div class="Q2">
      <input type="number" />
    </div>
  </div>
</template>

<!-- 請不要修改下面內容 -->
<script setup>
import { ref } from "vue";
const message = ref('這是一段話');
const phoneNumber = ref('0988888888');
</script>

---

Result

<template>
  <div id="app">
    <div class="Q1">
      <input type="text" v-model.lazy="message"/>
    </div>
    <div class="Q2">
      <input type="number" v-model.number="phoneNumber"/>
    </div>
  </div>
{{message}}
</template>

<!-- 請不要修改下面內容 -->
<script setup>
import { ref } from "vue";

const message = ref('這是一段話');
const phoneNumber = ref('0988888888');
</script>

思考與反饋

• 學習了 v-model 的修飾符如：.trim、.number、lazy 等用法

---

CODE

連結到 Codepen