vue實(shí)現(xiàn)表單驗(yàn)證小功能
本文實(shí)例為大家分享了vue實(shí)現(xiàn)表單驗(yàn)證的具體代碼,供大家參考,具體內(nèi)容如下
1.路由跳轉(zhuǎn)
先點(diǎn)開Vue項(xiàng)目中src目錄配置router文件然后用import暴露你的表單頁名稱并在你的Router實(shí)例中中注冊(cè)路由表代碼如下
import Create from "@/views/create/create.vue"; //前面是暴露的名字,首字母要用大寫。后面是你的表單頁所在目錄@是..的簡寫即返回上一層 const router=new Router({ mode:"history"http://這里是寫路由是什么模式 routes:[ { path: "/create",//默認(rèn)為/多個(gè)的話就是/加上路徑 name: "create", component: Create, title: "表單", }, ] })
路由表配置完成之后記得將home頁中的自己router-link標(biāo)簽的to選項(xiàng)配置一下
<router-link :to="{ name: 'create' }" class="collection">表單</router-link>
隨后就是表單頁
效果圖
功能實(shí)現(xiàn)代碼如下
插件用的是element.ui可以在終端中使用npm i element-ui 安裝成功之后在package.json中查看并在main.js中引用
安裝完成后就可以使用啦。
<template> <div class="create"> <h2>歡迎發(fā)布新菜譜,先介紹一下你的大作!</h2> <section class="create-introduce"> <h5>標(biāo)題</h5> <el-input v-model="backData.title" class="create-input" placeholder="請(qǐng)輸入內(nèi)容" ></el-input> <h5>屬性</h5> <div> <el-select v-for="item in propertyies" :key="item.parent_name" :placeholder="item.parent_name" v-model="backData.property[item.title]" > <el-option v-for="option in item.list" :key="option.type" :label="option.name" :value="option.type" > </el-option> </el-select> </div> <h5>菜譜分類</h5> <div> <el-select placeholder="請(qǐng)選擇菜譜分類" v-model="backData.classify"> <el-option-group v-for="group in classifies" :key="group.parent_type" :label="group.parent_name" > <el-option v-for="item in group.list" :key="item.type" :label="item.name" :value="item.type" > </el-option> </el-option-group> </el-select> </div> <h5>成品圖 (328*440)</h5> <div class="upload-img-box clearfix"> <div class="upload-img"> <upload-img action="/api/upload?type=product" :img-url="backData.product_pic_url" @res-url=" (data) => { backData, (product_pic_url = data.res); } " ></upload-img> </div> <el-input class="introduce-text" type="textarea" :rows="10" placeholder="請(qǐng)輸入內(nèi)容" > </el-input> </div> </section> <h2>記錄所有原材料</h2> <section class="create-introduce"> <h5>主料</h5> <!--[ { "name": "", "specs": "" }, { "name": "", "specs": "" }, { "name": "", "specs": "" } ]--> <Stuff v-model="backData.raw_material.main_material"></Stuff> <h5>輔料</h5> <Stuff v-model="backData.raw_material.accessories_material"></Stuff> </section> <h2>開始寫步驟了!能否簡單易學(xué)就看你怎么寫了,加油!</h2> <section class="create-introduce"> <Upload v-for="(item, index) in 3" :key="index"></Upload> <el-button class="eaeaea add-step-button" type="primary" size="medium" icon="el-icon-plus" @click="add" >增加一步</el-button > <h5>烹飪小技巧</h5> <el-input class="introduce-text" type="textarea" :rows="8" placeholder="分享下你做這道菜的過程中的心得和小技巧吧!" > </el-input> </section> <el-button class="send" type="primary" size="medium" :icon="icon" >搞定,提交審核</el-button > </div> </template> <script> import Stuff from "./stuff"; import Upload from "./step-upload"; import UploadImg from "@/components/upload-img"; import { getProperty, getClassify, publish } from "@/service/api"; const raw_materia_struct = { name: "", specs: "", }; export default { name: "create", components: { Stuff, Upload, UploadImg }, data() { return { backData: { title: "", property: {}, classify: "", product_pic_url: "", product_story: "", raw_material: { raw_material: Array(3) .fill(1) .map(() => ({ ...raw_materia_struct })), accessories_material: Array(3) .fill(1) .map(() => ({ ...raw_materia_struct })), }, }, propertyies: [], classifies: [], }; }, mounted() { getProperty().then(({ data }) => { console.log(data); this.propertyies = data; this.backData.property = data.reduce((o, item) => { o[item.title] = ""; return o; }, {}); // console.log(data); // console.log(this.backData.property) }); getClassify().then(({ data }) => { console.log(data); this.classifies = data; }); }, methods: { add() { console.log(1); }, }, }; </script> <style lang="stylus"> .create-introduce background-color #fff padding 20px .add-step-button margin-left 100px .create width 100% h2 text-align center margin 20px 0 .send // ff3232() height: 70px; width: 220px; background #ff3232 color #fff border none margin 20px auto display block h5 margin 20px 0 .create-input input width 446px line-height 22px .upload-img-box .upload-img float left .introduce-text float left .el-textarea width 60% margin-left 10px </style>
以上就是vue表單的全部內(nèi)容。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)三級(jí)頁面跳轉(zhuǎn)功能
這篇文章主要介紹了vue實(shí)現(xiàn)三級(jí)頁面跳轉(zhuǎn)功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令的相關(guān)資料,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-06-06Vite中自制mock服務(wù)器(不使用第三方服務(wù))
本文主要介紹了Vite中自制mock服務(wù)器,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04利用Vue.js框架實(shí)現(xiàn)火車票查詢系統(tǒng)(附源碼)
這篇文章主要介紹了利用Vue.js框架實(shí)現(xiàn)火車票查詢系統(tǒng)的相關(guān)資料,,文中給出了詳細(xì)的介紹與示例代碼,并在文章結(jié)尾給出了完整的項(xiàng)目下載,需要的朋友可以參考借鑒,下面來一起看看吧。2017-02-02vue項(xiàng)目中vue-i18n和element-ui國際化開發(fā)實(shí)現(xiàn)過程
這篇文章主要介紹了vue項(xiàng)目中vue-i18n和element-ui國際化開發(fā)實(shí)現(xiàn)過程,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04vue頁面離開后執(zhí)行函數(shù)的實(shí)例
下面小編就為大家分享一篇vue頁面離開后執(zhí)行函數(shù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢與更改方式
這篇文章主要介紹了vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢與更改方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue網(wǎng)站優(yōu)化實(shí)戰(zhàn)之秒開網(wǎng)頁
最近在搭建自己的博客,前端采用Vue技術(shù),發(fā)現(xiàn)首頁加載速度非常之慢,常常達(dá)到10S左右,遂開始優(yōu)化之旅,這篇文章主要給大家介紹了關(guān)于vue網(wǎng)站優(yōu)化實(shí)戰(zhàn)之秒開網(wǎng)頁的相關(guān)資料,需要的朋友可以參考下2022-08-08使用Vue綁定class和style樣式的幾種寫法總結(jié)
這篇文章主要介紹了使用Vue綁定class和style樣式的幾種寫法,文章通過代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07