15 表單輸入綁定 · JavaBeginnersTutorial 中文系列教程

# 15 表單輸入綁定 > 原文： [https://javabeginnerstutorial.com/vue-js/15-form-input-bindings/](https://javabeginnerstutorial.com/vue-js/15-form-input-bindings/) 歡迎參加有約束力的討論！現在我們已經了解了這個超級巨星`v-model`，它用于在表單元素上實現[雙向數據綁定](https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/)，讓我們直觀地了解 Vue 如何在引擎蓋下神奇地工作，通過選擇正確的更方式來更新特定 HTML 元素，基于它是單選按鈕還是復選框還是`select`元素。今天，我們將討論以下內容， 1. 單選框 2. 多個復選框 3. 單選按鈕 4. 單選下拉菜單 5. 多選下拉菜單 6. 帶有動態選項的下拉菜單第一件事第一！以下是我們將要使用的初始代碼， ## 起始代碼 index.html ```js <!DOCTYPE html> <html> <head> <title>Hello Vue!</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Welcome</h2> </div>  <script src="index.js"></script> </body> </html> ``` index.js ```js new Vue({ el: "#app", data: { } }); ``` ## 單選框看下面的代碼片段， `index.html`（代碼段） ```js <div> <h4>Single checkbox with a boolean value</h4>  <input type="checkbox" id="single" v-model="chosen"> <label for="single">{{ chosen }}</label> </div> ``` `index.js` ```js new Vue({ el: "#app", data: { chosen: false } }); ``` 我們有一個`id`，`single`復選框。讓我們有一個變量`chosen`，該變量在 Vue 實例的`data`屬性中分配為`false`。選中該復選框可使`chosen`的值為`true`。當與輸入類型`checkbox`一起使用時，如果是布爾值，`v-model`就是這樣工作的。 ![single checkbox](https://img.kancloud.cn/04/de/04de7d842126b783c2bbf87cc49d2b73_565x279.png) ## 多個復選框現在，讓我們有四個復選框，其值均綁定到同一數組。 `index.html`（代碼段） ```html <div> <h4>Multiple checkboxes with values of an array</h4>  <input type="checkbox" id="cars" value="Cars" v-model="checkedFilms"> <label for="cars">Cars</label> <input type="checkbox" id="brave" value="Brave" v-model="checkedFilms"> <label for="brave">Brave</label> <input type="checkbox" id="up" value="Up" v-model="checkedFilms"> <label for="up">Up</label> <input type="checkbox" id="ratatouille" value="Ratatouille" v-model="checkedFilms"> <label for="ratatouille">Ratatouille</label> <br/> <span>Selected pixar films are: {{ checkedFilms }}</span> </div> ``` `index.js`（代碼段） ```jsscript data: { checkedFilms: [] } ``` 因此，所有四個輸入元素均為`checkbox`類型，并且每個元素都具有與數組`checkedFilms`”的雙向綁定。請注意，該數組的初始值在 Vue 實例的`data`屬性中為空。在這里`v-model`的工作方式是，在數組`checkedFilms`中填充所選復選框的值。 ![multiple checkboxes](https://img.kancloud.cn/cf/1a/cf1a0f791b5dd4aed4b48040529eb72a_651x279.png) ## 單選按鈕很容易猜出`v-model`在單選按鈕下的行為。由于我們只能從組中選擇一個單選按鈕，因此綁定兩種方式的變量將獲取所選單選按鈕的值。 `index.html`（代碼段） ```html <div> <h4>Radio buttons</h4> <input type="radio" id="html" value="HTML" v-model="selected"> <label for="html">HTML</label> <br> <input type="radio" id="css" value="CSS" v-model="selected"> <label for="two">CSS</label> <br> <input type="radio" id="javascript" value="JavaScript" v-model="selected"> <label for="JavaScript">JavaScript</label> <br> <span>Selected option: {{ selected }}</span> </div> ``` `index.js`（代碼段） ```jsscript data: { selected: '' } ``` 根據選擇的選項，變量`selected`獲得`HTML`或`CSS`或`JavaScript`的值。 ![radio buttons](https://img.kancloud.cn/4b/ad/4badf6b1265b2bf02bacf5cfcef211a9_396x270.png) ## 單選下拉菜單這是一個正常的下拉列表，您可以在其中選擇一個選項。 `index.html`（代碼段） ```html <div> <h4>Radio buttons</h4> <input type="radio" id="html" value="HTML" v-model="selected"> <label for="html">HTML</label> <br> <input type="radio" id="css" value="CSS" v-model="selected"> <label for="two">CSS</label> <br> <input type="radio" id="javascript" value="JavaScript" v-model="selected"> <label for="JavaScript">JavaScript</label> <br> <span>Selected option: {{ selected }}</span> </div> ``` `index.js`（代碼段） ```jsscript data: { singleSelect: '' } ``` 變量`singleSelect`最初是一個空字符串。由于`v-model`的魔力，它獲得了從下拉列表中選擇的選項的值。 ![dropdown](https://img.kancloud.cn/24/83/2483e5e21c16251eec77517c718ec73e_453x250.png) ## 多選下拉菜單在這里，我們可以從下拉菜單中選擇多個選項，因此 Vue 實例的`data`屬性中`multiselect`變量的初始值是一個空數組。 `index.html` （代碼段） ```html <div> <h4>Multiselect dropdown</h4> <select v-model="multiselect" multiple> <option value="Dance">Dance</option> <option value="Swim">Swim</option> <option value="Paint">Paint</option> <option value="Play tennis">Play tennis</option> </select> <br> <span>I know to: {{ multiselect }}</span> </div> ``` `index.js`（代碼段） ```jsscript data: { multiselect: [] } ``` 將使用從下拉列表中選擇的所有值填充數組。（對于多項選擇，請向下按`Ctrl`鍵，然后選擇。） ![Multi-select dropdown](https://img.kancloud.cn/e4/f5/e4f5f1e0b5da67081667b87ad7903891_443x303.png) ## 帶有動態選項的下拉菜單在實時場景中，下拉菜單的選項并不總是已知的。另外，對值進行硬編碼永遠不是一個好習慣。因此，在必須處理動態數據的情況下，可以將`v-bind`與`v-model`一起使用。 *結合使用它們會賦予您無窮的力量！* 讓我們也利用`v-for`指令遍歷我們可能要處理的所有選項。 `index.html`（代碼段） ```html <div> <h4>Handling dynamic options</h4> <select v-model="dynamicSelection"> <option v-for="letter in alphabet" v-bind:value="letter.word"> {{ letter.for }} </option> </select> <span>Selected letter: {{ dynamicSelection }}</span> </div> ``` `Index.js`（代碼段） ```jsscript data: { dynamicSelection: 'Apple', alphabet: [ { word: 'Apple', for: 'A' }, { word: 'Bat', for: 'B' }, { word: 'Cat', for: 'C' } ] } ``` 在此，對于`alphabet`數組中的每個對象，下拉列表中均列出了“A”，“B”和“C”，并且`word`綁定到了選項標簽的`value`屬性。根據選擇的值，`word`在`dynamicSelection`變量中更新。請注意，初始值是`alphabet`數組中的第一個單詞。 ![dropdown with dynamic values](https://img.kancloud.cn/a8/47/a847693737df56cf9bd5f5d4a7c7256f_401x273.png) 到此為止，讓我們看一下到目前為止的完整代碼。 `index.html` ```html <!DOCTYPE html> <html> <head> <title>Hello Vue!</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Welcome</h2> <div> <h4>Single checkbox with a boolean value</h4>  <input type="checkbox" id="single" v-model="chosen"> <label for="single">{{ chosen }}</label> </div> <hr/> <div> <h4>Multiple checkboxes with values of an array</h4>  <input type="checkbox" id="cars" value="Cars" v-model="checkedFilms"> <label for="cars">Cars</label> <input type="checkbox" id="brave" value="Brave" v-model="checkedFilms"> <label for="brave">Brave</label> <input type="checkbox" id="up" value="Up" v-model="checkedFilms"> <label for="up">Up</label> <input type="checkbox" id="ratatouille" value="Ratatouille" v-model="checkedFilms"> <label for="ratatouille">Ratatouille</label> <br/> <span>Selected pixar films are: {{ checkedFilms }}</span> </div> <hr/> <div> <h4>Radio buttons</h4> <input type="radio" id="html" value="HTML" v-model="selected"> <label for="html">HTML</label> <br> <input type="radio" id="css" value="CSS" v-model="selected"> <label for="two">CSS</label> <br> <input type="radio" id="javascript" value="JavaScript" v-model="selected"> <label for="JavaScript">JavaScript</label> <br> <span>Selected option: {{ selected }}</span> </div> <hr/> <div> <h4>Single select dropdown</h4> <select v-model="singleSelect"> <option disabled value="">Please select one</option> <option>Chocolate</option> <option>Ice cream</option> <option>Green Tea</option> </select> <span>I love: {{ singleSelect }}</span> </div> <hr/> <div> <h4>Multiselect dropdown</h4> <select v-model="multiselect" multiple> <option value="Dance">Dance</option> <option value="Swim">Swim</option> <option value="Paint">Paint</option> <option value="Play tennis">Play tennis</option> </select> <br> <span>I know to: {{ multiselect }}</span> </div> <hr/> <div> <h4>Handling dynamic options</h4> <select v-model="dynamicSelection"> <option v-for="letter in alphabet" v-bind:value="letter.word"> {{ letter.for }} </option> </select> <span>Selected letter: {{ dynamicSelection }}</span> </div> </div>  <script src="index.js"></script> <link rel="stylesheet" href="style.css"></link> </body> </html> ``` `index.js` ```jsscript new Vue({ el: "#app", data: { chosen: false, checkedFilms: [], selected: '', singleSelect: '', multiselect: [], dynamicSelection: 'Apple', alphabet: [ { word: 'Apple', for: 'A' }, { word: 'Bat', for: 'B' }, { word: 'Cat', for: 'C' } ] } }); ``` 與往常一樣，可以在 [GitHub 倉庫](https://github.com/JBTAdmin/vuejs)中找到整個代碼，以方便參考。隨意撥叉并編寫代碼以符合您的內心需求。現在是時候在您自己的示例中練習其中的一些表單輸入，如果您有任何疑問，請在評論部分留言。祝你今天愉快！