Vue之表單事件數(shù)據(jù)綁定詳解
更新時間：2021年11月21日 16:07:49 作者：王同學(xué)要努力
這篇文章主要為大家介紹了Vue之表單事件的數(shù)據(jù)綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助,希望能夠給你帶來幫助
<body>
<div id="root">
<form action="" @submit.prevent="demo">
<label for="TW"> 姓名：</label>
<input type="text" id="TW" v-model.trim="userInfo.account"><br><br> 密碼：
<input type="password" id="pa" v-model="userInfo.password"><br><br> 年齡：
<input type="number" v-model.number="userInfo.age"> <br><br> 性別： <input type="radio" name="sex" value="male" v-model="userInfo.sex">男
<input type="radio" name="sex" v-model="userInfo.sex" value="female">女<br><br> 愛好： 所屬校區(qū):
<select v-model="userInfo.city">
<option value="school">請選擇校區(qū)</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<br><br>
<input type="checkbox" v-model="userInfo.hobby" value="study"> 學(xué)習(xí)
<input type="checkbox" v-model="userInfo.hobby" value="sing"> 唱歌
<input type="checkbox" v-model="userInfo.hobby" value="dance"> 跳舞
<input type="checkbox" v-model="userInfo.hobby" value="game"> 王者<br><br> 其他信息：
<textarea name="" v-model.lazy="userInfo.other"></textarea><br><br>
<input type="checkbox" v-model="userInfo.agree"> 閱讀并接受
<a href="#">《用戶協(xié)議》</a><button>提交</button>
</form>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
userInfo: {
account: '',
password: '',
age: '',
sex: 'female',
city: 'beijing',
hobby: [],
other: '',
agree: '',
}
},
methods: {
demo() {
console.log(JSON.stringify(this.userInfo));
}
}
})
</script>
</body>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue如何獲取數(shù)據(jù)列表展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefin
這篇文章主要介紹了ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點(diǎn)
這篇文章主要為大家介紹了Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Vue3+El-Plus實(shí)現(xiàn)表格行拖拽功能完整代碼
在vue3+elementPlus網(wǎng)站開發(fā)中,詳細(xì)完成el-table表格的鼠標(biāo)拖拽/拖曳/拖動排序,下面這篇文章主要給大家介紹了關(guān)于Vue3+El-Plus實(shí)現(xiàn)表格行拖拽功能的相關(guān)資料,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了10分鐘教你快速上手Vue3中新增的API,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
詳解如何在vue+element-ui的項(xiàng)目中封裝dialog組件
這篇文章主要介紹了詳解如何在vue+element-ui的項(xiàng)目中封裝dialog組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家詳細(xì)介紹了Vue使用vue-drag-resize生成懸浮拖拽小球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介的是?Vue中如何使用?class?類樣式的方法，在vue中為我們提供了幾種方式來使用class類的樣式，分別是布爾值、表達(dá)式、多類封裝、下面來看看文章的詳細(xì)介紹內(nèi)容吧,需要的朋友可以參考一下2021-11-11
使用Electron打包vue文件變成exe應(yīng)用程序的全過程
這篇文章主要給大家介紹了使用Electron打包vue文件變成exe應(yīng)用程序的全過程,文中通過代碼示例和圖文結(jié)合的方式給大家講解的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下2024-01-01