目標：

學會在 表單類 元素上使用 v-model 。

v-model作用：用于在 表單類 元素上實現(xiàn)雙向綁定。

---

一、input 和 textarea

<div id="app"><input type="text" value="初始值" v-model="value"> // 1、使用 v-model 綁定 value{{ value }}<br><br>// 2、使用 v-model 綁定 message<textarea v-model="message" name="" id="" cols="30" rows="10" placeholder="路撒大家法拉盛"></textarea>{{ message }} </div>var app = new Vue({el: '#app',data: {value: '董董',message: '塑料袋開發(fā)'} })

顯示效果：

現(xiàn)在，在 input 或者 textarea 中輸入內(nèi)容，通過花括號渲染出的文本會隨之改變。

注意：以上代碼中，input 中有 value 屬性，textarea 中有 placeholder 屬性。在使用 v-model 之前，它們都是正常顯示的。在使用 v-model 之后，它們就不顯示了，因為表單此時綁定了 data 中的數(shù)據(jù)，它要顯示綁定的數(shù)據(jù)而不再是 value 或 placeholder ，即使綁定的數(shù)據(jù)是個空字符串，表單中也會顯示空字符串。

---

二、單個單選按鈕 和 多個單選按鈕

<div id="app">單個單選按鈕：<input type="radio" name="" v-model="isChecked"> // 1、單個單選按鈕使用 v-model 沒用<br><br>單個單選按鈕：<input type="radio" name="" v-bind:checked="isChecked"> // 2、單個單選按鈕應該使用 v-bind<br><br>多個單選按鈕：<br>apple: <input type="radio" name="fruits" value="apple" v-model="checkFruit"> <br>peach: <input type="radio" name="fruits" value="peach" v-model="checkFruit"> <br>banana: <input type="radio" name="fruits" value="banana" v-model="checkFruit"> <br>lemon: <input type="radio" name="fruits" value="lemon" v-model="checkFruit"> <br>你選擇了 -- {{ checkFruit }}</div>var app = new Vue({el: '#app',data: {isChecked: true,checkFruit: 'peach' // 3、checkFruit 的值應該是多個單選按鈕中的 value 值，當然也可以是其他值} })

顯示效果：

上圖中，

• 第一個單選按鈕：用的是 v-model，所以沒用；
• 第二個單選按鈕：用的是 v-bind，有用；
• 第三個多個單選按鈕：因為 checkFruit 的值是 peach，所以默認選中 peach 。

---

三、單個復選框 和 多個復選框

<div id="app">單個復選框（使用 v-model）：<input type="checkbox" name="" v-model="isChecked"><br><br>單個復選框（使用 v-bind）：<input type="checkbox" name="" v-bind:checked="isChecked"><br><br>多個復選框：<br>apple: <input type="checkbox" name="fruits" value="apple" v-model="fruitArr"> <br>peach: <input type="checkbox" name="fruits" value="peach" v-model="fruitArr"> <br>banana: <input type="checkbox" name="fruits" value="banana" v-model="fruitArr"> <br>lemon: <input type="checkbox" name="fruits" value="lemon" v-model="fruitArr"> <br>你選擇了 -- {{ fruitArr }}</div>var app = new Vue({el: '#app',data: {isChecked: true,fruitArr: ['peach']} })

顯示效果：

上圖中，

• 第一個單個復選框：使用 v-model，有用；
• 第二個單個復選框：使用 v-bind，有用；
• 第三個多個復選框：fruitArr 的值應該是一個數(shù)組，如果是字符串，會被自動轉(zhuǎn)成布爾值。這里默認選中了 peach，如果再選一個 lemon，那么下面的數(shù)組中，會顯示 ["peach", "lemon"]。

---

四、單選的下拉框 和 多選的下拉框

<div id="app">單選的下拉框：<select name="" v-model="checkFruit"> // v-model 應該寫在 select 標簽上，而不是 option 標簽<option value="apple">apple</option><option value="peach">peach</option><option value="banana">banana</option><option value="lemon">lemon</option></select>你選中了 -- {{ checkFruit }}<br><br>多選的下拉框：<select multiple v-model="checkFruits"> // 實現(xiàn)多選，應該寫上 multiple 屬性<option value="apple">apple</option><option value="peach">peach</option><option value="banana">banana</option><option value="lemon">lemon</option></select>你選中了 -- {{ checkFruits }}</div>var app = new Vue({el: '#app',data: {checkFruit: 'peach', // 單選下拉框綁定的值，可以是字符串，也可以是數(shù)組，這里也可以寫成 checkFruit: ['peach']checkFruits: ['peach'] // 多選下拉框綁定的值，應該是數(shù)組} })

顯示效果：

上圖中，

• 第一個單選下拉框：每次只能選中一個，后面的文本會隨之改變；
• 第二個多選下拉框：按住 Ctrl 鍵，可以多選，后面的數(shù)組會隨之改變。

總結：

• 如果是單選：初始化最好給定字符串，因為 v--model 此時綁定的是靜態(tài)字符串或者布爾值；
• 如果是多選：初始化最好給定一個數(shù)組。

總結

以上是生活随笔為你收集整理的easyui根据select下拉框内容更新表单内容_10、表单与v-model的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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