vue3 表單輸入繫結
阿新 • • 發佈:2021-06-16
一、基礎
v-model 指令在表單<input>
、<textarea>
及<select>
元素上建立雙向資料繫結
1.文字
<div id="vm"> <input v-model="message" placeholder="edit me" /> <p>Message is: {{ message }}</p> </div> <script> const v = Vue.createApp({ data() {return { message:null } } }).mount('#vm') </script>
2.多行文字
<p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" ></textarea>
文字區域插值不起作用,應該使用v-model
來代替
3.複選框
<div id="vm"> <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> <script> const v = Vue.createApp({ data() { return { checkedNames: [] } } }).mount('#vm') </script>
4.單選按鈕
<div id="vm"> <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> <script> const v = Vue.createApp({ data() { return { picked: '' } } }).mount('#vm') </script>
5.選擇框
(1)簡單
<div id="vm"> <select v-model="selected"> <option disabled value="">請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> <script> const v = Vue.createApp({ data() { return { selected: '' } } }).mount('#vm') </script>
(2)多選
<div id="vm"> <select v-model="selected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> </div> <script> const v = Vue.createApp({ data() { return { selected: [] } } }).mount('#vm') </script>
(3)v-for動態渲染
<div id="vm"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> </div> <script> const v = Vue.createApp({ data() { return { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } } }).mount('#vm') </script>