表單中雙向綁定指令的使用 · vue筆記

[TOC] >[success] # 表單中雙向綁定指令的使用 >[success] ## input的雙向數據綁定下面的代碼中，**輸入框的值改變后，頁面上的文字也會改變，文字改變后，輸入框中的值也會改變** ，這就是 **雙向數據綁定** ，如果用 **input框的 v-model** ，就可以不用寫**value** 屬性了，直接用它就可以了。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表單中雙向綁定指令的使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ message: 'hello' } }, template: ` <div> {{message}} <input v-model="message"/> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## textarea的雙向數據綁定向以前 **textarea** 都要用 **雙標簽** 來使用，像這樣： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表單中雙向綁定指令的使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ template: ` <textarea> 123 </textarea> ` }) const vm = app.mount('#root') </script> </html> ~~~ 現在，在 **vue**中可以實現 **雙向數據綁定** 了，而且只需要 **單標簽** 的形式就可以使用。如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表單中雙向綁定指令的使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ message: 'hello' } }, template: ` <textarea v-model="message"/> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## checkbox的雙向數據綁定可以用 **input** 類型改為 **checkbox** ，然后綁定一個 **布爾值的變量** 即可實現 **雙向數據綁定** ，代碼如下： 1. **單個 checkbox** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表單中雙向綁定指令的使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ message: false } }, template: ` {{message}} <input type="checkbox" v-model="message"/> ` }) const vm = app.mount('#root') </script> </html> ~~~ 2. **多個checkbox** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表單中雙向綁定指令的使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ message: [] } }, template: ` {{message}} jack<input type="checkbox" v-model="message" value="jack"/> dell<input type="checkbox" v-model="message" value="dell"/> lee<input type="checkbox" v-model="message" value="lee"/> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ### checkbox的自定義寫法 **checkbox** 在 **選中** 以及 **取消選中**時候，通過 **true-value** 、**false-value** 屬性來 **動態更改顯示的文字** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表單中雙向綁定指令的使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ message: 'hello' } }, template: ` {{message}} <input type="checkbox" v-model="message" true-value="hello" false-value="world"/> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## radio的雙向數據綁定 **radio** 儲存值只需要用 **默認空字符串** 儲存即可，不需要向 **checkbox** 那樣用 **數組** ，因為 **radio** 只能選擇一個值。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表單中雙向綁定指令的使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ message: '' } }, template: ` {{message}} jack<input type="radio" v-model="message" value="jack"/> dell<input type="radio" v-model="message" value="dell"/> lee<input type="radio" v-model="message" value="lee"/> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## select的雙向數據綁定 1. **單選select** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表單中雙向綁定指令的使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ message: '' } }, template: ` {{message}} <select v-model="message"> <option disable value="">請選擇內容</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> ` }) const vm = app.mount('#root') </script> </html> ~~~ 2. **多選select** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表單中雙向綁定指令的使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ message: [], // options: [ // { // text: 'A', value: 'A' // }, // { // text: 'B', value: 'B' // }, // { // text: 'C', value: 'C' // } // ] // 數據可以寫成對象的形式 options: [ { text: 'A', value: { value: 'A' } }, { text: 'B', value: { value: 'B' } }, { text: 'C', value: { value: 'C' } } ] } }, template: ` {{message}} <select v-model="message" multiple> <option v-for="item in options" :value="item.value">{{item.text}}</option> </select> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## v-model指令修飾符、form表單標簽修飾符 1. **lazy修飾符（懶加載修飾符）** **input** 框 **失去焦點** 時候會觸發 **刷新數據的變化** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表單中雙向綁定指令的使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ message: 'hello' } }, template: ` {{message}} <input v-model.lazy="message"/> ` }) const vm = app.mount('#root') </script> </html> ~~~ 2. **number修飾符** **number修飾符可以做類型的轉換** ，如果默認是 **string** 類型，輸入值后 **保存到變量中的值是 number 類型** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表單中雙向綁定指令的使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ message: '123' } }, template: ` <div> {{ typeof message}} <input v-model.number="message" type="number /> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 3. **trim修飾符** **trim修飾符的意思，就是去掉輸入框前后的空格** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表單中雙向綁定指令的使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ message: '123' } }, template: ` <div> {{message}} <input v-model.trim="message"/> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~