10、Vuejs 3 —— 表單輸入繫結
阿新 • • 發佈:2022-04-10
用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向資料繫結;
<input v-model="message" placeholder="edit me" /> <p>Message is: {{ message }}</p> Vue.createApp({ data() { return { message: '' } } }).mount('#v-model-basic')
textarea
<textarea v-model="message" placeholder="add multiple lines"></textarea>
注意:插值表示式在 textarea中不起作用,而是應該使用 v-model 來代替:
<!-- 錯誤--> <textarea>{{ text }}</textarea>
複選框 checkbox
<div id="v-model-multiple-checkboxes"> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"/> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames" /> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" /> <label for="mike">Mike</label> <br /> <span>Checked names: {{ checkedNames }}</span> </div> Vue.createApp({ data() { return { checkedNames: [] } } }).mount('#v-model-multiple-checkboxes')
單選框 Radio
<div id="v-model-radiobutton"> <input type="radio" id="one" value="One" v-model="picked" /> <label for="one">One</label> <br /> <input type="radio" id="two" value="Two" v-model="picked" /> <label for="two">Two</label> <br /> <span>Picked: {{ picked }}</span> </div> Vue.createApp({ data() { return { picked: '' } } }).mount('#v-model-radiobutton')
下拉選擇框 select
<div id="v-model-select" class="demo"> <select v-model="selected"> <option disabled value="">Please select one</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> Vue.createApp({ data() { return { selected: '' } } }).mount('#v-model-select')
如果 v-model 表示式的初始值未能匹配任何選項,<select> 元素將被渲染為“未選中”狀態。在 iOS 中,這會使使用者無法選擇第一個選項。因為這樣的情況下,iOS 不會觸發 change 事件。因此,更推薦像上面這樣提供一個值為空的禁用選項。
下拉多選框
<select v-model="selected" multiple> <option>A</option> <option>B</option> <option>C</option> </select> <br /> <span>Selected: {{ selected }}</span> Vue.createApp({ data() { return { selected: '' // 將多選的項新增到陣列中 } } }).mount('#v-model-select')
v-model + 下拉框 與 v-for 結合使用
<div id="v-model-select-dynamic" class="demo"> <select v-model="selected"> <option v-for="option in options" :value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> </div>
Vue.createApp({ data() { return { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } } }).mount('#v-model-select-dynamic')
值繫結
<!-- 當選中時,`picked` 為字串 "a" --> <input type="radio" v-model="picked" value="a" /> <!-- `toggle` 為 true 或 false --> <input type="checkbox" v-model="toggle" /> <!-- 當選中第一個選項時,`selected` 為字串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
有時我們可能想把值繫結到當前活動例項的一個動態 property 上,這時可以用 v-bind 實現,此外,使用 v-bind 可以將輸入值繫結到非字串。
複選框
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" /> // 當選中時: vm.toggle === 'yes' // 當未選中時: vm.toggle === 'no'
這裡的 true-value 和 false-value attribute 並不會影響輸入控制元件的 value attribute,因為瀏覽器在提交表單時並不會包含未被選中的複選框。如果要確保表單中這兩個值中的一個能夠被提交,(即“yes”或“no”),請換用單選按鈕。
單選框
<input type="radio" v-model="pick" v-bind:value="a" // 當選中時 vm.pick === vm.a
選擇框
<select v-model="selected"> <!-- 內聯物件字面量 --> <option :value="{ number: 123 }">123</option> </select> // 當選中時 typeof vm.selected // => 'object' vm.selected.number // => 123
修飾符
.lazy
在預設情況下,v-model 在每次 input 事件觸發後將輸入框的值與資料進行同步 (除了上述輸入法組織文字時)。你可以新增 lazy 修飾符,從而轉為在 change 事件之後進行同步:
<!-- 在“change”時而非“input”時更新 --> <input v-model.lazy="msg" />
.number
自動將使用者的輸入值轉為數值型別
<input v-model.number="age" type="text" />
.trim
自動過濾使用者輸入的首尾空白字元
<input v-model.trim="msg" />
下一章:元件基礎