亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue ElementUI的from表單實現(xiàn)登錄效果的示例

 更新時間:2021年09月26日 09:58:01   作者:奇奇怪怪~  
本文主要介紹了vue ElementUI的from表單實現(xiàn)登錄效果的示例,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

1.通過ElementUI構(gòu)建基本的樣式

         不了解ElementUI官方網(wǎng)站 https://element.eleme.cn/#/zh-CN 對  ElementUI 進行基本的了解.

        1.1  ElementUI的使用 首先在項目中 通過指令 npm i element-ui S  安裝ElementUI

        1.2  然后在官網(wǎng)中找到 from表單 然后就可以基本的布局了

                那么下面是我已經(jīng)寫好的框架 

<el-form
      label-position="top"
      label-width="100px" class="demo-ruleForm"
      :rules='rules'
      :model='rulesForm'
      status-icon
      ref='ruleForm'
    >
        <el-form-item label="用戶名" prop="name">
            <el-input type="text" v-model="rulesForm.name"></el-input>
        </el-form-item>
 
        <el-form-item label="密碼" prop="password">
            <el-input type="password"  v-model="rulesForm.password"></el-input>
        </el-form-item>
 
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button>重置</el-button>
        </el-form-item>
    </el-form>

這些代碼對應的效果       

        其中有用到一些 ElementUI 一些屬性 此處 小編就不解釋了 官網(wǎng)上都有  那么我就放一些截圖 方便大家 查看這些屬性

        然后 其中 rules和model 配合使用 做一些input框輸入規(guī)則

然后 這兩個規(guī)則綁定給  賬號密碼框

  ElementUI 布局就這么點操作

2.用點擊提交按鈕將 將賬號密碼框內(nèi)的內(nèi)容 傳給后臺數(shù)據(jù)

我們通過  ref  可以 更好的 拿到 標簽內(nèi)的屬性

下面是 將輸入框內(nèi)的內(nèi)容傳給后臺的方法

methods: {
    submitForm(fromName){
      this.$refs[fromName].validate((valid)=>{
          if(valid){
            //如果校檢通過,在這里向后端發(fā)送用戶名和密碼
            login({
              name:this.rulesForm.name,
              password:this.rulesForm.password
            }).then((data)=>{
              if(data.code==0){
                localStorage.setItem('token',data.data.token)
                window.location.href='/'
              }
              if(data.code==1){
                this.$message.error(data.mes)
              }
            })
          }else{
            console.log('error submit!!')
            return false
          }
      })
    }
  }

其中有一個 login 是 我們封裝后端 的一個接口所得的方法

這個方法綁定給提交按鈕

然后我們輸入已有的賬號密碼  點擊提交按鈕  就可以登錄了

然后 就是我們渲染 登錄的 一些信息了

總結(jié)

一個登錄效果的實現(xiàn)就兩步:先用ElementUI構(gòu)建對應的樣式---》用點擊提交按鈕將 將賬號密碼框內(nèi)的內(nèi)容 傳給后臺數(shù)據(jù)

到此這篇關(guān)于vue ElementUI的from表單實現(xiàn)登錄效果的示例的文章就介紹到這了,更多相關(guān)vue Element from表單登錄 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論