當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue双向数据绑定v-model绑定单选框，复选框，下拉框

發布時間：2023/12/10 vue 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue双向数据绑定v-model绑定单选框，复选框，下拉框小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

v-model使用

- 1. 簡單的demo
- 2. 三種框的綁定

注意它是自動幫你確認值的！！！無需關心過程，把json數據一丟到data中，自動選中。

1. 簡單的demo

實現一邊在輸入框輸入，一邊顯示輸入框的內容

2. 三種框的綁定

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>vue 數據雙向綁定</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body><div id="app"><h4>msg: {{ message }}</h4><input type="text" v-model="message"/></div><div id="app1"><h4>gender: {{ gender }}</h4><input name ="gender" type="radio" value="男" v-model="gender"> 男<input name ="gender" type="radio" value="女" v-model="gender"> 女</div><div id="app2"><h4>hobby: {{ hobby }}</h4><input name="hobby" type="checkbox" value="1" v-model="hobby">籃球<input name="hobby" type="checkbox" value="2" v-model="hobby">羽毛球<input name="hobby" type="checkbox" value="3" v-model="hobby">pingPong球<input name="hobby" type="checkbox" value="4" v-model="hobby">足球</div><div id="app3"><h4>selected: {{ selected }}</h4><select v-model="selected"><option value="" disabled>=== 請選擇 ====</option><option>java</option><option>python</option><option>go</option></select></div><script>let app = new Vue({el: "#app",data: {message: "hello, vue.js!"}});new Vue({el: "#app1",data: {gender: "女"}});new Vue({el: "#app2",/* 多個復選框請使用數組 */data: {hobby: ["2", "3"]}});/* 下拉框綁定數據 */new Vue({el: "#app3",data: {selected: ""// selected: "java" 會自動選中java這一項}});</script></body> </html>

總結

以上是生活随笔為你收集整理的vue双向数据绑定v-model绑定单选框，复选框，下拉框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。