整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          第9天 - 14天搞定Vue3.0,表單輸入

          第9天 - 14天搞定Vue3.0,表單輸入

          Vue3.0中,事件處理用v-on指令,表單輸入綁定則用v-model指令。v-model指令在表單<input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。

          9.1 文本輸入

          在HTML標簽中,文本輸入有單行(text)和多行(textarea)輸入。溫馨提醒:v-model 會忽略所有表單元素的value的初始值而總是將當前活動實例的數據作為數據來源。你應該通過 JavaScript 該組件的 data 選項中聲明初始值。

          <!DOCTYPE html>
          <html>
          <head>
              <meta charset="UTF-8">
              <title>Vue3.0表單綁定</title>
              <script src="vue.global.js"></script>
          </head>
          <body>
          <div id="app">
              <input v-model="msg" placeholder="單行輸入"/>
              <p>單行輸入結果: {{ msg }}</p>
              <hr style="background-color: #4CAF50;height: 1px"/>
              <textarea v-model="msg2" placeholder="多行輸入"></textarea>
              <p>多行輸入結果: {{ msg2 }}</p>
          </div>
          <script>
              Vue.createApp({
                  data() {
                      return {
                          msg: '',
                          msg2: ''
                      }
                  }
              }).mount("#app")
          </script>
          </body>
          </html>

          輸出結果

          9.2 單選和多選

          在開發產品時,單選按鈕,用于多選一,在選擇性別時常見;單個復選框常在勾選協議中見到;在多個已知選項中,多選一時,可用select。

          多個復選框,常在選擇個人興趣愛好等見到。復選框,單選時,綁定到布爾值,多選時,綁定到同一個數組。如果要選擇項很多,那可用多選下拉菜單,以節約布局空間。

          <!DOCTYPE html>
          <html>
          <head>
              <meta charset="UTF-8">
              <title>Vue3.0表單綁定</title>
              <script src="vue.global.js"></script>
          </head>
          <body>
          <div id="app">
              快來,選擇你喜歡的編程語言
              <div>
                  <input type="checkbox" id="Python" value="Python" v-model="likes"/>
                  <label for="Python">Python</label>
                  <input type="checkbox" id="Java" value="Java" v-model="likes"/>
                  <label for="Java">John</label>
                  <input type="checkbox" id="web" value="前端" v-model="likes"/>
                  <label for="web">前端</label>
                  <br/>
                  <span>你選擇的語言: {{ likes.length > 0 ? likes : '' }}</span>
              </div>
              <div>
                  <input type="radio" id="boy" value="程序猿" v-model="gender"/>
                  <label for="boy">程序猿</label>
                  <br/>
                  <input type="radio" id="girl" value="程序媛" v-model="gender"/>
                  <label for="girl">程序媛</label>
                  <br/>
                  <input type="radio" id="no" value="不男不女" v-model="gender"/>
                  <label for="no">不男不女</label>
                  <br/>
                  <span>你是: {{ gender }}</span>
              </div>
              <div>
                  <select v-model="selected">
                      <option disabled value="">你愛帥哥還是美女</option>
                      <option>帥哥</option>
                      <option>美女</option>
                  </select>
                  <br/>
                  <span>你愛: {{ selected }}</span>
              </div>
              <div> 你確定就勾選:<input type="checkbox" id="checkbox" v-model="agree"/>
                </div>
              <br/>
              <div>
                  <button @keyup.enter="submit" type="submit" @click="submit">
                    提交</button>
              </div>
          </div>
          <script>
              Vue.createApp({
                  data() {
                      return {
                          likes: [],
                          gender: '',
                          selected: '',
                          agree: false
                      }
                  },
                  methods: {
                      submit() {
                          if (this.likes.length==0) {
                              alert('你沒有選擇喜歡的編程語言.')
                          } else if (this.gender=='') {
                              alert('性別選擇一下,又會怎么樣呢?')
                          } else if (this.selected=='') {
                              alert('沒有選擇你所愛的.')
                          } else if (this.agree==false) {
                              alert('勾選協議,才可以提交.')
                          } else {
                              alert('恭喜你,數據提交成功!')
                          }
                      }
                  }
              }).mount("#app")
          </script>
          </body>
          </html>

          輸出結果


          好了,有關Vue3.0表單輸入的內容,老陳講完了,如果覺得對你有所幫助,希望老鐵能轉發點贊,讓更多的人看到這篇文章。你的轉發和點贊,就是對老陳繼續創作和分享最大的鼓勵。

          一個當了10年技術總監的老家伙,分享多年的編程經驗。想學編程的朋友,可關注:老陳說編程。我在分享Python,前端、Java和App方面的干貨。關注我,沒錯的。

          #前端##Vue.js##JavaScript##程序員##Web#

          、封裝獲取元素的方法

          封裝思想——函數封裝——代碼復用

           function get_id(id){
               // 這個函數是專門來通過id獲取元素
               return document.getElementById(id)
           }
           
           function get_els(parentId, tagName){
               // 這個函數是專門來獲取某個父標簽范圍內的某些標簽
               return get_id(parentId).getElementsByTagName(tagName)
           }

          二、表單元素屬性

          常用的表單元素包括 input、select、textarea、button等,下面我們學習這些表單元素中常用的屬性。

          • value 用于獲取和設置表單元素的內容
          • type 用于獲取和設置input標簽的類型
          • checked 復選框選中屬性(true表示選中, false表示不選中)
          • disabled 用于禁用表單輸入或選擇操作

          需求:點擊按鈕修改input的類型和內容

          html和css代碼

           <input type="button" value="按鈕" id="btn">

          JavaScript代碼

          單標簽

          網頁(程序)如果要和用戶產生互動,則必須借助一定的中介,這個中介一般是:文本輸入框、按鈕、多選框、單選框。而表單則是這些中介和放置這些中介的空間(<form action=”” methon=””></form>)。

          在網頁中,這些文本輸入框、按鈕等等必須放置在由<form></form>這個標簽所定義的空間中,否則沒有實際意義。所以,由<form></form>標簽所定義的空間就是表單存在的空間。


          【各種輸入類型】

          1. 文字輸入框:每個表單之所以會有不同的類型,原因就在于type="表單類型"設定的不同而已,我們就先來看看第一個類型:文字輸入列。文字輸入列的形態就是type="text,其使用方法如下:

          呈現結果

          姓名:

          原始碼

          <form action=http://www.baidu.com/nameproject.aspmethon=”post”>

          姓名:<input type="text" name="name" size="20">

          </form>

          它有下列可設定之屬性:

          • name="名稱",是設定此一欄位的名稱,程式中常會用到。
          • size="數值",是設定此一欄位顯現的寬度。
          • value="預設內容",是設定此一欄位的預設內容。
          • align="對齊方式",是設定此一欄位的對齊方式,其值有:top(向上對齊)、middle(向中對齊)、bottom(向下對齊)、right(向右對齊)、left(向左對齊)、texttop(向文字頂部對齊)、baseline(向文字底部對齊)、absmiddle(絕對置中)、absbottom(絕對置下)等。
          • maxlength="數值",是設定此一欄位可設定輸入的最大長度。


          1. 單選框:利用type="radio"就會產生單選核取表單,單選核取表單通常是好幾個選項一起擺出來供使用者點選,一次只能從中選一個,故為單選核取表單。

          呈現結果

          性別:男 女

          原始碼

          <form>

          性別:

          男 <input type="radio" name="sex" value="boy">

          女 <input type="radio" name="sex" value="girl">

          </form>

          它有下列可設定之屬性:

          • name="名稱",是設定此一欄位的名稱,程式中常會用到。
          • value="內容",是設定此一欄位的內容、值或是意義。
          • align="對齊方式",是設定此一欄位的對齊方式,其值有:top(向上對齊)、middle(向中對齊)、bottom(向下對齊)、right(向右對齊)、left(向左對齊)、texttop(向文字頂部對齊)、baseline(向文字底部對齊)、absmiddle(絕對置中)、absbottom(絕對置下)等。
          • checked,是設定此一欄位為預設選取值。


          1. 復選框:利用type=" checkbox "就會產生復選核取表單,復選核取表單通常是好幾個選項一起擺出來供使用者點選,一次可以同時選好幾個,故為復選核取表單。

          呈現結果

          喜好: 電影 看書

          原始碼

          <form>

          喜好:

          <input type="checkbox" name="sex" value="movie">電影

          <input type="checkbox" name="sex" value="book">看書

          </form>

          它有下列可設定之屬性:

          • name="名稱",是設定此一欄位的名稱,程式中常會用到。
          • value="內容",是設定此一欄位的內容、值或是意義。
          • align="對齊方式",是設定此一欄位的對齊方式,其值有:top(向上對齊)、middle(向中對齊)、bottom(向下對齊)、right(向右對齊)、left(向左對齊)、texttop(向文字頂部對齊)、baseline(向文字底部對齊)、absmiddle(絕對置中)、absbottom(絕對置下)等。
          • checked,是設定此一欄位為預設選取值。


          1. 密碼表單:利用type=" password "就會產生一個密碼表單,密碼表單和文字輸入表單長得幾乎一樣,差別就在于密碼表單在輸入時全部會以星號來取代輸入的文字,以防他人偷窺。

          呈現結果

          請輸入密碼:

          原始碼

          <form>

          請輸入密碼:<input type="password" name="input">

          </form>

          它有下列可設定之屬性:

          • name="名稱",是設定此一欄位的名稱,程式中常會用到。
          • size="數值",是設定此一欄位顯現的寬度。
          • value="預設內容",是設定此一欄位的預設內容,不過呈現出來仍是星號。
          • align="對齊方式",是設定此一欄位的對齊方式,其值有:top(向上對齊)、middle(向中對齊)、bottom(向下對齊)、right(向右對齊)、left(向左對齊)、texttop(向文字頂部對齊)、baseline(向文字底部對齊)、absmiddle(絕對置中)、absbottom(絕對置下)等。
          • maxlength="數值",是設定此一欄位可設定輸入的最大長度。


          1. 送出按鈕:通常我們表單填完之后,都會有一個送出按鈕以及清除重寫的按鈕,分別是利用type=" submit "及type=" reset "來產生,相當的簡單易用。

          呈現結果

          原始碼

          <form>

          <input type="submit" value="送出資料">

          <input type="reset" value="重新填寫">

          </form>

          它有下列可設定之屬性:

          • name="名稱",是設定此一按鈕的名稱。
          • value="文字",是設定此一按鈕上要呈現的文字,若是沒有設定,瀏覽器也會自動替您加上“送出查詢”、“重設”等字樣。
          • align="對齊方式",是設定此一欄位的對齊方式,其值有:top(向上對齊)、middle(向中對齊)、bottom(向下對齊)、right(向右對齊)、left(向左對齊)、texttop(向文字頂部對齊)、baseline(向文字底部對齊)、absmiddle(絕對置中)、absbottom(絕對置下)等。


          1. 按鈕元件:表單中或是java script常會用到按鈕來作一些效果,因此,我們可以利用type=" button "來產生一個按鈕,相當簡單。

          呈現結果

          請按下按鈕:

          原始碼

          <form>

          請按下按鈕:<input type="button" name="ok" value="我同意">

          </form>

          它有下列可設定之屬性:

          • name="名稱",是設定此一按鈕的名稱。
          • value="文字",是設定此一按鈕上要呈現的文字。
          • align="對齊方式",是設定此一欄位的對齊方式,其值有:top(向上對齊)、middle(向中對齊)、bottom(向下對齊)、right(向右對齊)、left(向左對齊)、texttop(向文字頂部對齊)、baseline(向文字底部對齊)、absmiddle(絕對置中)、absbottom(絕對置下)等。


          1. 隱藏欄位:表單中有時有些東西因為某些因素,不想讓使用者看到,但因程式需要卻又不得不存在,此時,我們就可以利用type=" hidden "來產生一個隱藏的欄位。

          呈現結果

          隱藏欄位:

          原始碼

          <form>

          隱藏欄位:<input type="hidden" name="nosee" value="看不到">

          </form>

          它有下列可設定之屬性:

          • name="名稱",是設定此一欄位的名稱。
          • value="文字",是設定此一欄位的值、文字或意義。

          【大量文字輸入元件】

          1. 有時候我們會希望讓使用者輸入比較大量的文字,此時,文字輸入列就顯得不敷使用,因此我們就可以利用<textarea></textarea>來產生一個可以輸入大量文字的元件,夾在兩個標簽中的文字會出現在框框中,可作為預設文字。

          呈現結果

          請輸入您的意見:

          原始碼

          <form>

          請輸入您的意見:<br>

          <textarea name="talk" cols="20" rows="3"></textarea>

          </form>

          它有下列可設定之屬性:

          • name="名稱",是設定此一欄位的名稱。
          • wrap="設定值",是設定此一欄位的換行模式。設定值有三種:off(輸入文字不會自動換行)、virtual(輸入文字在螢幕上會自動換行,不過若是使用者沒有自行按下enter換行,送出資料時,也視為沒有換行)、physical(輸入文字會自動換行,送出資料時,會將螢幕上的自動換行,視為換行效果送出)。
          • cols="數值",是設定此一欄位的行數(橫向字數)。
          • rows="數值",是設定此一欄位的列數(垂直字數)。


          【下拉式選單】

          1. 下拉式選單令整個網頁看起來有很專業的感覺,我們只要利用<select name="名稱">便可以產生一個下拉式選單,另外,還需要配合<option>標簽來產生選項,這樣才算完整喔!

          呈現結果

          您喜歡看書嗎?:

          非常喜歡

          還算喜歡

          不太喜歡

          非常討厭

          原始碼

          <form>

          您喜歡看書嗎?:

          <select name="like">

          <option value="非常喜歡">非常喜歡

          <option value="還算喜歡">還算喜歡

          <option value="不太喜歡">不太喜歡

          <option value="非常討厭">非常討厭

          </select>

          </form>

          它有下列可設定之屬性:

          1. size="數值",是設定此一欄位的大小,預設值為1,若是您的選項有四個,然后您將size設成4,那么,下拉式選單便會變成選項方塊,將四個選項一起呈現在方塊中。

          multiple,是設定此一欄位為復選,可以一次選好幾個選項。

          ....................................................................

          我的微信公眾號:UI嚴選 —越努力,越幸運


          主站蜘蛛池模板: 夜精品a一区二区三区| 国产短视频精品一区二区三区| 国产一区二区不卡在线播放| 国产福利一区二区三区| 免费看一区二区三区四区 | 精品福利一区二区三区| 亚洲乱码一区二区三区国产精品| 国产综合无码一区二区三区| 日亚毛片免费乱码不卡一区 | 国产激情无码一区二区| 精品福利一区二区三区| 成人乱码一区二区三区av| jazzjazz国产精品一区二区| 一区二区免费国产在线观看| 无码人妻一区二区三区免费视频 | 亚洲视频一区二区三区四区| 人妻少妇精品视频一区二区三区 | 天堂Aⅴ无码一区二区三区| 小泽玛丽无码视频一区| 国产福利电影一区二区三区,免费久久久久久久精 | 亚洲日韩一区二区一无码| 一区二区三区精密机械| 在线播放精品一区二区啪视频| 无码中文字幕乱码一区| 国产剧情一区二区| 精品无码综合一区| 久久久91精品国产一区二区| 骚片AV蜜桃精品一区| 亚洲乱码av中文一区二区| 成人精品视频一区二区三区尤物| 精品国产一区二区三区久久影院 | 无码午夜人妻一区二区三区不卡视频| 丝袜无码一区二区三区| 久久久综合亚洲色一区二区三区| 久久国产精品无码一区二区三区| 99久久无码一区人妻a黑| 国产色欲AV一区二区三区| 国产91精品一区二区麻豆亚洲| 上原亚衣一区二区在线观看| 人妻体内射精一区二区三区 | 日韩精品无码免费一区二区三区|