2023年度鐵人_[Day 17] v-model 指令

在 Vue 中，v-model 指令中綁定的變數名稱要與在 JS 中定義的變數
名相同，且變數必須是響應式的。

<!-- eslint-disable --> 
<template>
    <div class="mt-3 p-3 w-25">
        <div class="mb-3">
            <label class="form-label">姓名：</label>
            <input class="form-control" type="text" v-model="fullName" />
        </div>
        <div>
            {{fullName}}
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";
const fullName = ref();
</script>

在< input >元素上，透過 v-model="fullName"，將 fullName 變數綁定到< input >元素上。
在< template >中，使用{{fullName}}呈現在文字輸入中輸入的值。

如此就能看到輸入文字內容也會即時呈現再底下的div中

改成按鈕版本

<!-- eslint-disable --> 
<template>
    <div class="mt-3 p-3 w-25">
        <div class="mb-3">
            <label class="form-label">姓名：</label>
            <input class="form-control" type="text" v-model="fullName" />
        </div>
        <div class="mb-3">
            <input class="btn btn-primary" type="button" value="送出" @click="changeText" />
        </div>
        <div>
            {{fullName}}
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";
const fullName = ref();
const changeText = () => {
fullName.value = 'Alex';
};
</script>

用 type="button"的按鈕指定@click="changeText"事件。
在 JS 程式碼中定義changeText()函數，於此函數裡面修改fullName變數值。
文字輸入框及{{}}內容都會即時同步回饋