事件監聽

<input
id="username"
type='text'
@inpute='handleInput'
>

//like js 訪問輸入匡的值

methods:{
handleInput(e){
console.log(e.target.value)
}
}

//想在頁面同時展示用戶數據
//隨用戶輸入自動更新html
//js
data(){
return{
username:"",
};
}
methods:{
handleInput(e){
this.username=e.target.value
}
}
//html
<p>
{{username}}
</p>

• Button清除input值

v-model

<input
id="username"
type='text'
v-model='username'
>
<button @click='resetUsername'> reset </button>

//like js 訪問輸入匡的值

//想在頁面同時展示用戶數據
//隨用戶輸入自動更新html
//js
data(){
return{
username:"",
};
}
methods:{
resetUsername(){
this.username=''
}
}
}
//html
<p>
{{username}}
</p>

其他表單處理

表單提交