當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

vue教程 html表单美化与 vue表单数据的自动搜集

發(fā)布時(shí)間：2024/8/1 vue 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue教程 html表单美化与 vue表单数据的自动搜集小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

html表單美化與 vue表單數(shù)據(jù)的自動(dòng)搜集

html表單
html表單美化
html表單數(shù)據(jù)提交
vue表單數(shù)據(jù)自動(dòng)搜集
- v-model的修飾符

html表單

input 文本框

密碼框

單選框

#單選框，同一個(gè)name表示同一組，互斥。 <div class="radio-field"><input type="radio" name="name" id="male"/> <label for="male">男</label><input type="radio" name="name" id="female"/> <label for="female">女</label> </div>

復(fù)選框

#復(fù)選框，同一個(gè)name的復(fù)選框，以數(shù)組形式提交數(shù)據(jù)。 <div class="checkbox-field"><input type="checkbox" name="fruit" id="apple"><label for="apple">蘋(píng)果</label><input type="checkbox" name="fruit" id="pear"> <label for="pear">梨子</label><input type="checkbox" name="fruit" id="banana"> <label for="banana">香蕉</label><input type="checkbox" name="fruit" id="orange"> <label for="orange">橘子</label> </div>

普通按鈕，提交按鈕，重置按鈕

文件作用域（選擇文件）

<p>文件作用域(選擇文件)</p> <div class="fille-field"><input id="file" type="file"><label for="file">新增文件</label> </div>

隱藏域（不顯示，但是會(huì)提交）

文本域

<p>文本域(多行文本輸入框)</p> <div class="textarea-field"><textarea placeholder="提交留言....."></textarea> </div>

下拉列表框

<p>下拉列表框</p> <div class="select-field"><select><option value="1">蘋(píng)果</option><option value="2" selected="selected">梨子</option><option value="3">香蕉</option></select> </div>

html表單美化

原生html表單控件的美化效果

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>.username-field {border: 1px solid #e0e0e0;display: inline-block;width: 400px;height: 44px;display: flex;align-items: center;border-radius: 4px;}.username-field label {margin: 0 20px;font-size: 16px;}.username-field input {outline: none;border: none;flex: 1;font-size: 16px;}.radio-field {}.radio-field input[type=radio]{display: none;}.radio-field input:checked + label{border: 1px solid dodgerblue;color: dodgerblue;}.radio-field label {border: 1px solid #ddd;display: inline-block;padding: 3px 20px;border-radius: 4px;}.checkbox-field input[type=checkbox] {display: none;}.checkbox-field label {border: 1px solid #ddd;display: inline-block;padding: 3px 20px;border-radius: 4px;}.checkbox-field input:checked + label {border: 1px solid dodgerblue;color: dodgerblue;}.checkbox-field input:checked + label:after {content: '1';display: inline-block;color: dodgerblue;padding-left: 5px;}.common-button {height: 40px;width: 80px;border: 1px solid #e0e0e0;outline: none;cursor: pointer;border-radius: 4px;font-size: 14px;}.common-button:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.submit-button {height: 40px;width: 80px;border: 1px solid #e0e0e0;outline: none;cursor: pointer;border-radius: 4px;font-size: 14px;}.submit-button:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.reset-button {height: 40px;width: 80px;border: 1px solid #e0e0e0;outline: none;cursor: pointer;border-radius: 4px;font-size: 14px;}.reset-button:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.fille-field input[type=file]{display: none;}.fille-field label {display: block;width: 80px;height: 80px;border: 1px solid #ddd;display: flex;align-items: center;justify-content: center;border-radius: 4px;}.fille-field label:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.textarea-field textarea {outline: none;border: 1px solid #e0e0e0;width: 300px;height: 140px;padding: 10px;font-size: 14px;}.select-field select {background:#fafdfe;height:28px;width:180px;line-height:28px;border:1px solid #9bc0dd;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}.select-field option {width: 300px;height: 36px;font-size: 16px;}</style> </head> <body ><div id="app" ><form><div ><p>文本框</p><div class="username-field"><label for="username">賬號(hào):</label> <input id="username" type="text" /></div></div><div><p>密碼框</p><div class="username-field"><label for="password">密碼:</label> <input id="password" type="password" /></div></div><div><p>單選框</p><div class="radio-field"><input type="radio" name="name" id="male"/> <label for="male">男</label><input type="radio" name="name" id="female"/> <label for="female">女</label></div></div><div><p>復(fù)選框</p><div class="checkbox-field"><input type="checkbox" name="fruit" id="apple"> <label for="apple">蘋(píng)果</label><input type="checkbox" name="fruit" id="pear"> <label for="pear">梨子</label><input type="checkbox" name="fruit" id="banana"> <label for="banana">香蕉</label><input type="checkbox" name="fruit" id="orange"> <label for="orange">橘子</label></div></div><div><p>普通按鈕</p><input class="common-button" type="button" value="普通按鈕" /></div><div><p>提交按鈕</p><input class="submit-button" type="submit" value="提交按鈕" /></div><div><p>重置按鈕</p><input class="reset-button" type="reset" value="清空按鈕"></div><div><p>文件作用域(選擇文件)</p><div class="fille-field"><input id="file" type="file"><label for="file">新增文件</label></div></div><div><p>文本域(多行文本輸入框)</p><div class="textarea-field"><textarea placeholder="提交留言....."></textarea></div></div><div><p>下拉列表框</p><div class="select-field"><select><option value="1">蘋(píng)果</option><option value="2" selected="selected">梨子</option><option value="3">香蕉</option></select></div></div><div style="margin-bottom: 50px"></div></form> </div> </body>

html表單數(shù)據(jù)提交

html的被提交數(shù)據(jù)的表單，都是獲取表單控件的name屬性和value屬性的值，組成name=value形式提交。

form標(biāo)簽
屬性：

action屬性：表示要提交到的url目標(biāo)。
method屬性：表示http請(qǐng)求方式，一般是post。
target屬性：表示以什么窗口打開(kāi)。
onsubmit屬性：表單提交時(shí)會(huì)冒泡到調(diào)用這個(gè)方法。可以在此方法中阻止默認(rèn)的提交事件。
onreset屬性：表單重置時(shí)會(huì)冒泡到調(diào)用該方法。以在此方法中阻止默認(rèn)的重置事件。

#普通的（無(wú)文件，圖片上傳）的表單提交，每個(gè)表單項(xiàng)都需要有name屬性和value屬性。提交的URL，會(huì)以 "name=value&name1=value2" 形式組成。 <form action="vue.html" method="get" target="_blank"><div>文本標(biāo)簽 <input type="text" placeholder="請(qǐng)輸入姓名" name="username" /></div><div>密碼標(biāo)簽 <input type="password" placeholder="請(qǐng)輸入密碼" name="password" /></div><div>單選框 <input type="radio" name="gender" value="male"/> 男<input type="radio" name="gender" value="female" /> 女</div><div>復(fù)選框 <input type="checkbox" name="hobbit" value="apple"/> 蘋(píng)果<input type="checkbox" name="hobbit" value="pear"/> 梨子<input type="checkbox" name="hobbit" value="banana"/> 香蕉</div><div>文本作用域<textarea name="detail"></textarea></div><div>下拉列表框<select name="select"><option value="apple">蘋(píng)果</option><option value="pear">梨子</option><option value="banana">香蕉</option></select></div><div><input type="hidden" name="version" value="1.0" /></div><input type="submit" /><input type="reset" /> </form>

文件上傳的表單

#表單默認(rèn)的enctype為application/x-www-form-urlencoded. #如果是含有文本的表單，enctype必須為 multipart/form-data。 <form action="vue.html" method="post" enctype="multipart/form-data"><input type="file" name="file"/><input type="submit" /><input type="reset" /> </form>

vue表單數(shù)據(jù)自動(dòng)搜集

表單提交數(shù)據(jù)的核心依然是 name-value。但是vue對(duì)表單項(xiàng)中的value做了處理。

1、文本、密碼、textarea 表單項(xiàng)，使用v-model代替value。需要提供name，value為用戶(hù)輸入的文本。

2、radio、checkbox 表單項(xiàng)，使用v-model代替checked。radio，checkbox需要提供name，value。只有處于checked狀態(tài)的表單項(xiàng)才會(huì)被提交。

單個(gè)復(fù)選框，綁定到一個(gè)字符串文本。
多個(gè)復(fù)選框，綁定到同一個(gè)數(shù)組。
單選框，綁定到一個(gè)字符串文本。

3、hidden 表單項(xiàng)，使用v-model代替value。通過(guò)v-model綁定的數(shù)據(jù)代替value。

4、select 表單項(xiàng)，使用v-model代替selected.通過(guò)v-model綁定的數(shù)據(jù)確定選中的數(shù)據(jù)。

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>.username-field {border: 1px solid #e0e0e0;display: inline-block;width: 400px;height: 44px;display: flex;align-items: center;border-radius: 4px;}.username-field label {margin: 0 20px;font-size: 16px;}.username-field input {outline: none;border: none;flex: 1;font-size: 16px;}.radio-field {}.radio-field input[type=radio]{display: none;}.radio-field input:checked + label{border: 1px solid dodgerblue;color: dodgerblue;}.radio-field label {border: 1px solid #ddd;display: inline-block;padding: 3px 20px;border-radius: 4px;}.checkbox-field input[type=checkbox] {display: none;}.checkbox-field label {border: 1px solid #ddd;display: inline-block;padding: 3px 20px;border-radius: 4px;}.checkbox-field input:checked + label {border: 1px solid dodgerblue;color: dodgerblue;}.checkbox-field input:checked + label:after {content: '1';display: inline-block;color: dodgerblue;padding-left: 5px;}.common-button {height: 40px;width: 80px;border: 1px solid #e0e0e0;outline: none;cursor: pointer;border-radius: 4px;font-size: 14px;}.common-button:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.submit-button {height: 40px;width: 80px;border: 1px solid #e0e0e0;outline: none;cursor: pointer;border-radius: 4px;font-size: 14px;}.submit-button:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.reset-button {height: 40px;width: 80px;border: 1px solid #e0e0e0;outline: none;cursor: pointer;border-radius: 4px;font-size: 14px;}.reset-button:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}.fille-field input[type=file]{display: none;}.fille-field label {display: block;width: 80px;height: 80px;border: 1px solid #ddd;display: flex;align-items: center;justify-content: center;border-radius: 4px;}.fille-field label:hover {border: 1px solid dodgerblue;color: dodgerblue;font-size: 15px;}</style> </head> <body ><div id="app" ><form method="get" action="vue.html"><div ><p>文本框{{username}}</p><div class="username-field"><label for="username">賬號(hào):</label> <input id="username" type="text" name="username" v-model="username"/></div></div><div><p>密碼框{{password}}</p><div class="username-field"><label for="password">密碼:</label> <input id="password" type="password" name="password" v-model="password"/></div></div>#單選框radio，只要v-model綁定對(duì)象的值，與某一個(gè)radio的value匹配，就表示該項(xiàng)選中。<div><p>單選框{{name}}</p><div class="radio-field"><input type="radio" name="name" value="male" id="male" v-model="name"/> <label for="male">男</label><input type="radio" name="name" value="female" id="female" v-model="name"/> <label for="female">女</label></div></div>#復(fù)選框checkbox，只要v-model綁定對(duì)象的數(shù)組中的元素，與某一個(gè)checkbox的value匹配，就表示該項(xiàng)選中。<div><p>復(fù)選框{{fruit}}</p><div class="checkbox-field"><input type="checkbox" name="fruit" value="apple" id="apple" v-model="fruit"> <label for="apple">蘋(píng)果</label><input type="checkbox" name="fruit" value="pear" id="pear" v-model="fruit"> <label for="pear">梨子</label><input type="checkbox" name="fruit" value="banana" id="banana" v-model="fruit"> <label for="banana">香蕉</label><input type="checkbox" name="fruit" value="orange" id="orange" v-model="fruit"> <label for="orange">橘子</label></div></div>#下拉框select。只要v-model綁定的對(duì)象的值，與某個(gè)option的value匹配，就是選中該項(xiàng)。<div><p>下拉框</p><select name="sports" v-model="sports" id="sports"><option value="basketball">籃球</option><option value="football">足球</option><option value="baseball">棒球</option></select></div><div><input type="hidden" name="version" v-model="version"></div><div><p>普通按鈕</p><input class="common-button" type="button" value="普通按鈕" /></div><div><p>提交按鈕</p><input class="submit-button" type="submit" value="提交按鈕" /></div><div><p>重置按鈕</p><input class="reset-button" type="reset" value="清空按鈕"></div><div><p>文件作用域(選擇文件)</p><div class="fille-field"><input id="file" type="file"><label for="file">新增文件</label></div></div><div><p>文本域(多行文本輸入框){{textarea}}</p><div><textarea name="textarea" v-model="textarea"></textarea></div></div></form> </div><script>const vm = new Vue({el : '#app',data: {username : '',password : '',name : '',fruit: [],textarea :''},watch:{name( newValue, oldValue ){alert(newValue);}},methods: {error(){alert("圖片加載錯(cuò)誤");},abort(){alert("圖片加載失敗");},keyup( event ){console.log("鍵盤(pán)彈起");},keydown( event ){console.log("鍵盤(pán)按下");}}});</script> </body> </html>

v-model的修飾符

.lazy

#在默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 (除了上述輸入法組合文字時(shí))。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進(jìn)行同步. <input v-model.lazy="msg" >

.number

#如果想自動(dòng)將用戶(hù)的輸入值轉(zhuǎn)為數(shù)值類(lèi)型，可以給 v-model 添加 number 修飾符：因?yàn)榧词乖?type="number" 時(shí)，HTML 輸入元素的值也總會(huì)返回字符串。如果這個(gè)值無(wú)法被 parseFloat() 解析，則會(huì)返回原始的值。<input v-model.number="age" type="number">

.trim

#如果要自動(dòng)過(guò)濾用戶(hù)輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：<input v-model.trim="msg">

總結(jié)

以上是生活随笔為你收集整理的vue教程 html表单美化与 vue表单数据的自动搜集的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。