表單輸入繫結
阿新 • • 發佈：2021-08-15
表單輸入繫結
單行文字輸入框
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id = "app"> <input type="text" v-model="message" value="Hello Vue.js"> <p>message：{{message}}</p> </div> <script src="https://unpkg.com/vue@next"></script> <script> const vm = Vue.createApp({ data() { return { message: 'Java無難事' } } }).mount('#app'); </script> </body> </html>
在input元素中使用value屬性設定了一個初始值"Hello Vue.js"，用v-model指令綁定了一個表示式message，對應的資料屬性是message。
從圖中可以看出文字輸入框顯示的是資料屬性message的值，而不是value屬性的值。這是因為v-model指令會忽略所有表單元素的value、checked、selected屬性的初始值，而總是將當前活動例項的資料屬性作為資料來源。所以我們應該在js指令碼中或是在元件的data選項中宣告初始值。
v-model提供了一個trim修飾符，可以自動過濾輸入資料首尾的空白字元。
v-model還有.lazy修飾符。預設情況下v-model在每次input事件觸發後將輸入框的值與資料進行同步，如果使用了該修飾符則會轉變為使用change事件進行同步。
如果想自動將使用者輸入的資料轉換為數值型別，可以給v-model加number修飾符。
多行文字輸入框
<textarea v-model="message"></textarea>
複選框
複選框單獨使用時，v-model繫結的是布林值，多個一起使用時繫結的是同一個陣列，選中的複選框的值將被儲存到陣列中。
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id = "app"> <h3>單個複選框：</h3> <input id="agreement" type="checkbox" v-model="isAgree"> <label for="agreement">{{ isAgree }}</label> <h3>多個複選框：</h3> <input id="basketball" type="checkbox" value="籃球" v-model="interests"> <label for="basketball">籃球</label> <input id="football" type="checkbox" value="足球" v-model="interests"> <label for="football">足球</label> <input id="volleyball" type="checkbox" value="排球" v-model="interests"> <label for="volleyball">排球</label> <input id="swim" type="checkbox" value="游泳" v-model="interests"> <label for="swim">游泳</label> <p>你的興趣愛好是: {{ interests }}</p> </div> <script src="https://unpkg.com/vue@next"></script> <script> const vm = Vue.createApp({ data() { return { isAgree: false, interests: [] } } }).mount('#app'); </script> </body> </html>
對於這種一組複選框一起使用的場景，可以考慮將變化的部分抽取出來放到元件例項的data中，定義為一個物件或陣列，然後通過v-for指令迴圈渲染輸出。
單選按鈕
當單選按鈕被選中時，v-model指令所繫結的資料屬性的值會被設定為該單選按鈕的value值 。
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id = "app">
<input id="male" type="radio" value="1" v-model="gender">
<label for="male">男</label>
<br>
<input id="female" type="radio" value="0" v-model="gender">
<label for="female">女</label>
<br>
<span>性別：{{ gender }}</span>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
gender: ''
}
}
}).mount('#app');
</script>
</body>
</html>
當選中男或女，gender的值會變為1或0；對於單選按鈕，v-model監聽的是change事件。
選擇框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id = "app">
<h3>單選選擇框</h3>
<select v-model="education">
<option disabled value="">請選擇您的學歷</option>
<option>高中</option>
<option>本科</option>
<option>碩士</option>
<option>博士</option>
</select>
<p>您的學歷是：{{ education }}</p>
<h3>多選選擇框</h3>
<select v-model="searches" multiple>
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<p>您選擇的搜尋引擎是：{{ searches }}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
education: '',
searches: [],
options: [
{text: '百度', value: 'baidu.com'},
{text: '谷歌', value: 'google.com'},
{text: '必應', value: 'bing.com'}
]
}
}
}).mount('#app');
</script>
</body>
</html>
值繫結
複選框
在使用某個複選框時，在input元素上可以使用兩個特殊的屬性true-value和false-value來指定選中狀態和未選中狀態下v-model繫結的值是什麼。
<div id="app">
<input id="agreement" type="checkbox" v-model="isAgree" true-value="yes" false-value="no">
<label for="agreement">{{ isAgree }}</label>
</div>
<script>
const vm = Vue.createApp({
data(){
return {
isAgree:false
}
}
}).mount('#app');
</script>
isAgree初始值為false，當選中複選框時，其值為true-value的值，之後再取消複選框，其值為false-value的值。
這兩個屬性還可以使用v-bind繫結到資料屬性上：
<div id="app">
<input id="agreement" type="checkbox" v-model="isAgree" :true-value="trueVal" :false-value="falseVal">
<label for="agreement">{{ isAgree }}</label>
</div>
<script>
const vm = Vue.createApp({
data(){
return {
isAgree:false,
trueVal:'真',
falseVal:'假'
}
}
}).mount('#app');
</script>
單選按鈕
單選按鈕被選中時，v-model繫結的資料屬性的預設值為該單選按鈕的value值，可以將value屬性繫結到另一個屬性：
<div id="app">
<input id="male" type="radio" v-model="gender" :value="genderVal[0]">
<label for="male">男</label><br>
<input id="female" type="radio" v-model="gender" :value="genderVal[1]">
<label for="female">女</label><br>
<span>性別:{{ gender }}</span>
</div>
<script>
const vm = Vue.createApp({
data(){
return {
gender:'',
fenderVal:['帥哥','美女']
}
}
}).mount('#app');
</script>
選擇框的選項
通過選擇框選擇內容後，其值是選項的值(option元素的value屬性的值)，選項的value屬性也可以使用v-bind指令繫結到一個數據屬性上。
<option v-for="option in options" :value="option.value"></option>
例項：使用者註冊
在單頁應用程式程式中，使用者註冊在提交時使用AJAX傳送資料到服務端，資料格式採用JSON格式，在表單提交前，通常使將要傳送的資料先組織為一個js物件或陣列，然後轉換為JSON字串進行傳送。可以使用v-model指令將輸入控制元件直接繫結到某個物件的屬性上，然後用v-on繫結提交按鈕的click事件，在事件處理函式中直接傳送該物件即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用者註冊</title>
</head>
<body>
<div id = "app">
<form>
<table border="0">
<tr>
<td>使用者名稱:</td>
<td>
<input type="text" name="username" v-model="user.username">
</td>
</tr>
<tr>
<td>密碼:</td>
<td>
<input type="password" name="password" v-model="user.password">
</td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" name="gender" value="1" v-model="user.gender">男
<input type="radio" name="gender" value="0" v-model="user.gender">女
</td>
</tr>
<tr>
<td>郵件地址：</td>
<td>
<input type="text" name="email" v-model="user.email">
</td>
</tr>
<tr>
<td>密碼問題：</td>
<td>
<input type="text" name="pwdQuestion" v-model="user.pwdQuestion">
</td>
</tr>
<tr>
<td>密碼答案：</td>
<td>
<input type="text" name="pwdAnswer" v-model="user.pwdAnswer">
</td>
</tr>
<tr>
<td>
<input type="submit" value="註冊" @click.prevent="register">
</td>
<td><input type="reset" value="重填"></td>
</tr>
</table>
</form>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
user: {
username: '',
password: '',
gender: '',
email: '',
pwdQuestion: '',
pwdAnswer: ''
}
}
},
methods: {
register: function(){
//直接傳送this.user物件
//...
console.log(this.user);
}
}
}).mount('#app');
</script>
</body>
</html>
在提交按鈕上繫結click事件時用了prevent修飾符，這是因為本例項是在click事件響應函式中完成的使用者註冊資料的傳送，並不希望表單的預設行為發生。