當前位置：首頁 >

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

發布時間：2024/8/1 55 豆豆

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

html表單美化與 vue表單數據的自動搜集

html表單
html表單美化
html表單數據提交
vue表單數據自動搜集
- v-model的修飾符

html表單

input 文本框

密碼框

單選框

#單選框，同一個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>

復選框

#復選框，同一個name的復選框，以數組形式提交數據。 <div class="checkbox-field"><input type="checkbox" name="fruit" id="apple"><label for="apple">蘋果</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>

隱藏域（不顯示，但是會提交）

文本域

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

下拉列表框

<p>下拉列表框</p> <div class="select-field"><select><option value="1">蘋果</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">賬號:</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>復選框</p><div class="checkbox-field"><input type="checkbox" name="fruit" id="apple"> <label for="apple">蘋果</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">蘋果</option><option value="2" selected="selected">梨子</option><option value="3">香蕉</option></select></div></div><div style="margin-bottom: 50px"></div></form> </div> </body>

html表單數據提交

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

form標簽
屬性：

action屬性：表示要提交到的url目標。
method屬性：表示http請求方式，一般是post。
target屬性：表示以什么窗口打開。
onsubmit屬性：表單提交時會冒泡到調用這個方法。可以在此方法中阻止默認的提交事件。
onreset屬性：表單重置時會冒泡到調用該方法。以在此方法中阻止默認的重置事件。

#普通的（無文件，圖片上傳）的表單提交，每個表單項都需要有name屬性和value屬性。提交的URL，會以 "name=value&name1=value2" 形式組成。 <form action="vue.html" method="get" target="_blank"><div>文本標簽 <input type="text" placeholder="請輸入姓名" name="username" /></div><div>密碼標簽 <input type="password" placeholder="請輸入密碼" name="password" /></div><div>單選框 <input type="radio" name="gender" value="male"/> 男<input type="radio" name="gender" value="female" /> 女</div><div>復選框 <input type="checkbox" name="hobbit" value="apple"/> 蘋果<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">蘋果</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>

文件上傳的表單

#表單默認的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表單數據自動搜集

表單提交數據的核心依然是 name-value。但是vue對表單項中的value做了處理。

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

2、radio、checkbox 表單項，使用v-model代替checked。radio，checkbox需要提供name，value。只有處于checked狀態的表單項才會被提交。

單個復選框，綁定到一個字符串文本。
多個復選框，綁定到同一個數組。
單選框，綁定到一個字符串文本。

3、hidden 表單項，使用v-model代替value。通過v-model綁定的數據代替value。

4、select 表單項，使用v-model代替selected.通過v-model綁定的數據確定選中的數據。

<!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">賬號:</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綁定對象的值，與某一個radio的value匹配，就表示該項選中。<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>#復選框checkbox，只要v-model綁定對象的數組中的元素，與某一個checkbox的value匹配，就表示該項選中。<div><p>復選框{{fruit}}</p><div class="checkbox-field"><input type="checkbox" name="fruit" value="apple" id="apple" v-model="fruit"> <label for="apple">蘋果</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綁定的對象的值，與某個option的value匹配，就是選中該項。<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("圖片加載錯誤");},abort(){alert("圖片加載失敗");},keyup( event ){console.log("鍵盤彈起");},keydown( event ){console.log("鍵盤按下");}}});</script> </body> </html>

v-model的修飾符

.lazy

#在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。你可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步. <input v-model.lazy="msg" >

.number

#如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符：因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat() 解析，則會返回原始的值。<input v-model.number="age" type="number">

.trim

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。