在Vue3.0中，事件處理用v-on指令，表單輸入繫結則用v-model指令。v-model指令在表單<input>、<textarea> 及 <select> 元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0表單繫結</title> <script src="vue.global.js"></script></head><body><div id="app"> <input v-model="msg" placeholder="單行輸入"/> <p>單行輸入結果: {{ msg }}</p> <hr style="background-color: #4CAF50;height: 1px"/> <textarea v-model="msg2" placeholder="多行輸入"></textarea> <p>多行輸入結果: {{ msg2 }}</p></div><script> Vue.createApp({ data() { return { msg: '', msg2: '' } } }).mount("#app")</script></body></html>輸出結果
多個複選框，常在選擇個人興趣愛好等見到。複選框，單選時，繫結到布林值，多選時，繫結到同一個陣列。如果要選擇項很多，那可用多選下拉選單，以節約佈局空間。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0表單繫結</title> <script src="vue.global.js"></script></head><body><div id="app"> 快來，選擇你喜歡的程式語言 <div> <input type="checkbox" id="Python" value="Python" v-model="likes"/> <label for="Python">Python</label> <input type="checkbox" id="Java" value="Java" v-model="likes"/> <label for="Java">John</label> <input type="checkbox" id="web" value="前端" v-model="likes"/> <label for="web">前端</label> <br/> <span>你選擇的語言: {{ likes.length > 0 ? likes : '' }}</span> </div> <div> <input type="radio" id="boy" value="程式猿" v-model="gender"/> <label for="boy">程式猿</label> <br/> <input type="radio" id="girl" value="程式媛" v-model="gender"/> <label for="girl">程式媛</label> <br/> <input type="radio" id="no" value="不男不女" v-model="gender"/> <label for="no">不男不女</label> <br/> <span>你是: {{ gender }}</span> </div> <div> <select v-model="selected"> <option disabled value="">你愛帥哥還是美女</option> <option>帥哥</option> <option>美女</option> </select> <br/> <span>你愛: {{ selected }}</span> </div> <div> 你確定就勾選：<input type="checkbox" id="checkbox" v-model="agree"/> </div> <br/> <div> <button @keyup.enter="submit" type="submit" @click="submit"> 提交</button> </div></div><script> Vue.createApp({ data() { return { likes: [], gender: '', selected: '', agree: false } }, methods: { submit() { if (this.likes.length == 0) { alert('你沒有選擇喜歡的程式語言.') } else if (this.gender == '') { alert('性別選擇一下，又會怎麼樣呢?') } else if (this.selected == '') { alert('沒有選擇你所愛的.') } else if (this.agree == false) { alert('勾選協議，才可以提交.') } else { alert('恭喜你，資料提交成功!') } } } }).mount("#app")</script></body></html>輸出結果
#前端##Vue.js##JavaScript##程式設計師##Web#
最新評論