vue双向数据绑定v-model绑定单选框，复选框，下拉框
生活随笔
收集整理的這篇文章主要介紹了
vue双向数据绑定v-model绑定单选框，复选框，下拉框
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
v-model使用
- 1. 簡(jiǎn)單的demo
- 2. 三種框的綁定
注意它是自動(dòng)幫你確認(rèn)值的！！！無(wú)需關(guān)心過(guò)程，把json數(shù)據(jù)一丟到data中，自動(dòng)選中。
1. 簡(jiǎn)單的demo
實(shí)現(xiàn)一邊在輸入框輸入，一邊顯示輸入框的內(nèi)容
2. 三種框的綁定
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>vue 數(shù)據(jù)雙向綁定</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 中文文檔地址 --> </head> <body><!-- 數(shù)據(jù)和model的雙向綁定-- 表單輸入綁定https://cn.vuejs.org/v2/guide/forms.html--><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>=== 請(qǐng)選擇 ====</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",/* 多個(gè)復(fù)選框請(qǐng)使用數(shù)組 */data: {hobby: ["2", "3"]}});/* 下拉框 綁定數(shù)據(jù) */new Vue({el: "#app3",data: {selected: ""// selected: "java" 會(huì)自動(dòng)選中java這一項(xiàng)}});</script></body> </html>
總結(jié)
以上是生活随笔為你收集整理的vue双向数据绑定v-model绑定单选框，复选框，下拉框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： winform第三方控件wmp
- 下一篇： 【Tensorflow教程笔记】常用模块