［Vue.js］change イベント
公開日：2026-02-23
更新日：2026-02-23
更新日：2026-02-23
1. 概要
入力欄の値が変更された時のイベントを拾って処理を実行します。
動作確認：Vite 7.3.1、Vue.js 3.5.25
動作確認：Vite 7.3.1、Vue.js 3.5.25
2. サンプル
2.1 コード
index.html と src/main.ts は、「Hello, World」で作成したものを使用します。
src/App.vue
実行結果
src/App.vue
コード
<script setup lang="ts">
const valueChanged1 = (event: Event) => {
const inputValue = (event.target as HTMLInputElement).value
console.log(inputValue)
};
const valueChanged2 = (event: Event) => {
const isChecked = (event.target as HTMLInputElement).checked;
console.log(isChecked)
};
</script>
<template>
<input type="text" @change="valueChanged1" /><br /><!-- 省略記法 -->
<input type="text" v-on:change="valueChanged1" /><br />
<input type="text" @input="valueChanged1" /><br />
<input type="checkbox" @change="valueChanged2" value="1" /><br />
</template>実行結果
2.2 説明
change イベントは、フォーカスがはずれた時など値が確定した時に、値が変わっていたら発生します。
input イベントは、値が変わると即座にイベントが発生します。
input イベントは、値が変わると即座にイベントが発生します。
