上篇僅僅談論到介面資料渲染,這篇主要是使用過程中的demo
解決方法:1、路由配置檔案router/index.js 跳轉路由前判斷是否登入2、關於涉及許可權頁面元件載入函式判斷
router.
beforeeach
((to,
from
, next)
=>
else
else}}
);export
default router;
mounted()
,methods:
,}
"testform"
:rules=
"testrulesyzm"
:model=
"testform"
>
"手機號" prop=
"phonenum"
>
"" v-model=
"testform.phonenum" placeholder=
"手機號"
>
<
/el-input>
<
/el-form-item>
"15"
>
"pyzm"
>
"testform.pyzm" placeholder=
"簡訊驗證碼" style=
"width: 100%;"
>
<
/el-input>
<
/el-form-item>
<
/el-col>
"2">
<
/el-col>
"7">
"isyzm" @click=
"getyzm()" type=
"primary" style=
"width: 100%;"
>傳送驗證碼<
/el-button>
else disabled @click=
"getyzm()" type=
"primary" style=
"width: 100%;"
>傳送驗證碼<
/el-button>
<
/el-col>
<
/el-row>
"新密碼" prop=
"newpwd"
>
"password" v-model=
"testform.newpwd" placeholder=
"請輸入新密碼"
>
<
/el-input>
<
/el-form-item>
"確認密碼" prop=
"dnewpwd"
>
"password" v-model=
"testform.dnewpwd" placeholder=
"請輸入確認密碼"
>
<
/el-input>
<
/el-form-item>
"issub" @click=
'setpwd()' type=
"primary"
>提交<
/el-button>
else disabled @click=
'setpwd()' type=
"primary"
>提交<
/el-button>
"login()" style=
"float: right;" type=
"text"
>登入<
/el-button>
}<
/el-form>
資料data:
data()
, testrulesyzm:,]
, pyzm:[,
],newpwd:[,
,], dnewpwd:[,
]},}
}
這樣的觸發,啟用輸入框然後blur,提交表單的時候觸發驗證:this.$refs[『testform』].validate((valid)=>{}
methods:
else
}else})
;},}
'contents'
>
<
/div>
"citylist"
:height=
"tableheight" style=
"width: 100%;"
>
"province" label=
"省" width=
"80"
>
<
/el-table-column>
"areas" label=
"市">
"citylist"
>
"margin:0 5px" v-
for=
"(v,index) in citylist.row.areas" type=
"primary"
:key=
'index'
>
"selcity(v.id,v.name)" style=
"color:#0074d9;cursor: pointer;"
>
}<
/a>
<
/span>
<
/slot>
<
/el-table-column>
<
/el-table>
vue高階總結三
請求介面返回的字段,渲染的時候需要拼接部分字串,起初盲目for迴圈拼接,下班後回想起總感覺不對勁,果然,哈哈,vue變數字串拼接是各種支援的呢 渲染,行資料單獨處理 slot scope scope 站點logo width 180 scope png width 80 template el ta...
Vue高階之元件(二)
這一篇主要是講slot。我的另一篇在 另外文章開頭還是要說一下,這一篇文章借鑑了很多 這個博主寫的vue真的很好,包括畫的流程圖,示意圖都很好。官網api的說法是 注意兩點 元件不知道它的掛載點會有什麼內容。掛載點的內容是由的父元件決定的。元件很可能有它自己的模版。為了讓元件可以組合,我們需要一種方...
VUE學習總結(二)
1 計算屬性 computerd set function newvalue 2 class繫結 data computed methods,表示式較長或邏輯複雜,優先使用computed。例項data中給出 isactive iserror的值 class條件過多時 超過兩個 也可以繫結計算屬性,...