Vue007_ 表单输入绑定
生活随笔
收集整理的這篇文章主要介紹了
Vue007_ 表单输入绑定
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?表單輸入綁定
?
使用 v-model ?對表單數(shù)據(jù)自動(dòng)收集
1) text/textarea
2) checkbox
3) radio
4) select
?
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="demo"><form @submit.prevent="handleSubmit"><span>用戶名：</span><input type="text" v-model="user.username" /><br /><span>密碼：</span><input type="password" v-model="user.pwd" /><br /><span>性別：</span><input type="radio" id="female" value="female" v-model="user.sex" /><label for="female">女</label><input type="radio" id="male" value="male" v-model="user.sex" /><label for="male">男</label><br /><span>愛好: </span><input type="checkbox" id="basket" value="basketball" v-model="user.likes"><label for="basket">籃球</label><input type="checkbox" id="foot" value="football" v-model="user.likes"><label for="foot">足球</label><input type="checkbox" id="pingpang" value="pingpang" v-model="user.likes"><label for="pingpang">乒乓</label><span>城市：</span><select v-model="user.cityId"><option value="">未選擇</option><!-- :value -> Text containing the value of the element. --><option v-for="city in allcitys" :value="city.id" >{{ city.name }}</option></select><br /><span>介紹：</span><textarea v-model="user.desc" rows="10"></textarea><br /><br /><input type="submit" value="注冊" /></form></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({//提供一個(gè)在頁面上已存在的 DOM 元素作為 Vue //實(shí)例的掛載目標(biāo)。可以是 CSS 選擇器，也可以是一個(gè) HTMLElement 實(shí)例。 el: '#demo',data: {user: {username: '',pwd: '',sex: 'female',likes: [],cityId: '',desc: '',},allcitys: [{id: 1,name: 'BJ'},{id: 2,name: 'SH'},{id: 4,name: 'ZZ'}],},methods:{handleSubmit(event){//stringify函數(shù)以JSON格式返回表示ECMAScript值的字符串。//類似于我們JAVA中的Object.toString()alert(JSON.stringify(this.user))}}})</script></body> </html>結(jié)果展示：
?
?
總結(jié)
以上是生活随笔為你收集整理的Vue007_ 表单输入绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue006_事件处理
- 下一篇： Vue008_ Vue实例生命周期