<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                [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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> <!-- 通過cdn方式引入vue --> <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> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看