v-model 指令在表單控件元素上創建雙向數據綁定，下面一一進行示例解釋。
1、v-model 雙向綁定文本
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <input v-model="message" placeholder="edit me"> 11 <p>Message is: {{ message }}</p> 12 </div> 13 </body> 14 <script> 15 var vm = new Vue({ 16 el:"#app", 17 data: { 18 message: '綁定文本' 19 } 20 }) 21 </script> 22 </html>
輸出結果：
2、v-model 雙向綁定多行文本，與上面的例子相似。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <<span>Multiline message is:</span> 11 <p style="white-space: pre">{{ message }}</p> 12 <br> 13 <textarea v-model="message" placeholder="add multiple lines"></textarea> 14 </div> 15 </body> 16 <script> 17 var vm = new Vue({ 18 el:"#app", 19 data: { 20 message: '綁定多行文本' 21 } 22 }) 23 </script> 24 </html>
輸出結果：
3、v-model 綁定復選框
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <input type="checkbox" id="checkbox" v-model="checked"> 11 <label for="checkbox">{{ checked }}</label> 12 </div> 13 </body> 14 <script> 15 var vm = new Vue({ 16 el:"#app", 17 data: { 18 checked: 'true' 19 } 20 }) 21 </script> 22 </html>
輸出結果：選中為true 不選中則為false
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <input type="checkbox" id="jack" value="劉二狗" v-model="checkedNames"> 11 <label for="jack">Jack</label> 12 <input type="checkbox" id="john" value="張麻子" v-model="checkedNames"> 13 <label for="john">John</label> 14 <input type="checkbox" id="mike" value="小狗子" v-model="checkedNames"> 15 <label for="mike">Mike</label> 16 <br> 17 <span>Checked names: {{ checkedNames }}</span> 18 </div> 19 </body> 20 <script> 21 var vm = new Vue({ 22 el:"#app", 23 data: { 24 checkedNames: [] 25 } 26 }) 27 </script> 28 </html>
輸出結果：
4、v-model 綁定單選按鈕
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <input type="radio" id="one" value="One" v-model="picked"> 11 <label for="one">One</label> 12 <br> 13 <input type="radio" id="two" value="Two" v-model="picked"> 14 <label for="two">Two</label> 15 <br> 16 <span>Picked: {{ picked }}</span> 17 </div> 18 </body> 19 <script> 20 var vm = new Vue({ 21 el:"#app", 22 data: { 23 picked: '' 24 } 25 }) 26 </script> 27 </html>
輸出結果：
5、v-model 綁定下拉列表
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <select v-model="selected"> 11 <option>A</option> 12 <option>B</option> 13 <option>C</option> 14 </select> 15 <span>Selected: {{ selected }}</span> 16 </div> 17 </body> 18 <script> 19 var vm = new Vue({ 20 el:"#app", 21 data: { 22 selected: '' 23 } 24 }) 25 </script> 26 </html>
輸出結果：
多選列表
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <select v-model="selected" multiple style="width: 50px"> 11 <option>A</option> 12 <option>B</option> 13 <option>C</option> 14 </select> 15 <br> 16 <span>Selected: {{ selected }}</span> 17 </div> 18 </body> 19 <script> 20 var vm = new Vue({ 21 el:"#app", 22 data: { 23 selected: [] 24 } 25 }) 26 </script> 27 </html>
輸出結果：
6、動態選項，用 v-for 渲染：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <select v-model="selected"> 11 <option v-for="option in options" v-bind:value="option.value"> 12 {{ option.text }} 13 </option> 14 </select> 15 <span>Selected: {{ selected }}</span> 16 </div> 17 </body> 18 <script> 19 var vm = new Vue({ 20 el:"#app", 21 data: { 22 selected: 'A', 23 options: [ 24 { text: 'One', value: 'A' }, 25 { text: 'Two', value: 'B' }, 26 { text: 'Three', value: 'C' } 27 ] 28 } 29 }) 30 </script> 31 </html>
輸出結果：
