vue注冊用戶使用v-model實現數據雙向綁定

定義數據模型

//定義數據模型
const registerData = ref({username: '',password: '',confirmPassword: ''
})

使用 v-model 實現數據模型的key與注冊表單中的元素之間的雙向綁定

在這里插入圖片描述

<!-- 注冊表單 --><el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData"><el-form-item><h1>注冊</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="請輸入用戶名" v-model="registerData.username"></el-input></el-form-item><el-form-item><el-input :prefix-icon="Lock" type="password" placeholder="請輸入密碼" v-model="registerData.password"></el-input></el-form-item><el-form-item><el-input :prefix-icon="Lock" type="password" placeholder="請輸入再次密碼" v-model="registerData.confirmPassword"></el-input></el-form-item><!-- 注冊按鈕 --><el-form-item><el-button class="button" type="primary" auto-insert-space>注冊</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false">← 返回</el-link></el-form-item></el-form>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/83394.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/83394.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/83394.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！