工作176:表单重置
生活随笔
收集整理的這篇文章主要介紹了
工作176:表单重置
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
復制代碼
<el-form :model="loginForm" ref="loginFormRef"> // 1. 需要給表單指定 ref 屬性 , 可以理解為表單的 名字<!-- 用戶名 --><el-form-item prop="username"> // 2. 需要給 需要重置 的表單項指定 prop 屬性, 值為 表單 loginForm 中的 username<el-inputv-model="loginForm.username"prefix-icon="el-icon-user-solid"placeholder="請輸入用戶名"></el-input></el-form-item><!-- 密碼 --><el-form-item prop="password"> // 2. 同上<el-input v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="請輸入密碼"></el-input></el-form-item><el-form-item class="btns"><el-button size="medium" type="primary">登錄</el-button><el-button size="medium" @click="reset" type="info">重置</el-button> // 3. 給重置的按鈕綁定 click事件</el-form-item></el-form>
data: function() {return {loginForm: {username: '',password: ''}}}
methods: {// 表單的重置功能reset() {console.log('123')this.$refs.loginFormRef.resetFields() // 4. 通過this.$refs.(上面提到的表單名字) 調用API resetFields(), 即可實現表單的重置// console.log(this.$refs[formName])}}
?
總結
以上是生活随笔為你收集整理的工作176:表单重置的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: HDU 2549 壮志难酬
- 下一篇: 利用MentoHUST在路由器上使用锐捷