第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>標簽所定義的空間就是表單存在的空間。

【各種輸入類型】

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

呈現結果

姓名：

原始碼

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

</form>

它有下列可設定之屬性：

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

單選框：利用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，是設定此一欄位為預設選取值。

復選框：利用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，是設定此一欄位為預設選取值。

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

呈現結果

請輸入密碼：

原始碼

<form>

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

</form>

它有下列可設定之屬性：

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

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

呈現結果

原始碼

<form>

</form>

它有下列可設定之屬性：

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

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

呈現結果

請按下按鈕：

原始碼

<form>

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

</form>

它有下列可設定之屬性：

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

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

呈現結果

隱藏欄位：

原始碼

<form>

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

</form>

它有下列可設定之屬性：

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

【大量文字輸入元件】

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

呈現結果

請輸入您的意見：

原始碼

<form>

請輸入您的意見：<br>

</form>

它有下列可設定之屬性：

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

【下拉式選單】

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

呈現結果

您喜歡看書嗎？：

非常喜歡

還算喜歡

不太喜歡

非常討厭

原始碼

<form>

您喜歡看書嗎？：

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

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

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

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

</select>

</form>

它有下列可設定之屬性：

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

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

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

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

在線咨詢

上一篇：3分鐘理解HTTP的請求與響應
下一篇：搜題神器app大學生？分享八個搜題直接出答案的軟件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

9.1 文本輸入

9.2 單選和多選

您的項目需求